I am working on this - where week is selected by ctrl+Click that highlight the cells as in image follows:
In this, blue color cells are highlighted by using ctrl+ click.
Now I am trying to add right click on these selected cells, so that I will get up a pop up to select dates only from the selected weeks(means datpicker only need to enable selected weeks dates only). The problem is, I need to select the highlighted areas dynamically , so that W11/W12 as order 1 and W14 as order 2, likewise it is going on.. User can able to select as much weeks separately as can...
there is lot much of code to select highlighted weeks to save earlier.. I m sharing the part only where we select weeks here ..
var XMLParser = new XMLWriter();
var Order = 0;
var StartDate = "9-11-2015 08:00:00.000";
var EndDate = "12-12-2015 08:00:00.000";
var xmlDates = "<Data>";
//alert(xmlAuditDates);
var StartTD = 0;
var EndTD = 0;
var CurrentTD = 0;
var PlanStartWeek = "";
var PlanEndWeek = "";
var TDid = "";
var LastYearWeek
$("tr td").each(function (i, ele) {
if ($(ele).hasClass("highlighted") || $(ele).hasClass("highlightedinA")) {
TDid = this.id.split("_")[0]
if (StartTD == 0) {
StartTD = this.id;
}
CurrentMonthTD = this.id.split("_")[1]
if (CurrentTD != 0 && (((parseInt(CurrentTD) + 1) != TDid) && (parseInt(CurrentTD) != TDid))
&& !((parseInt(CurrentTD) == 52 || parseInt(CurrentTD) == 53) && TDid == 1)) {
EndTD = CurrentTD;
Order = AuditOrder + 1;
StartDate = document.getElementById("hiddenWeek" + StartTD).value.split("$")[0];
EndDate = document.getElementById("hiddenWeek" + EndTD).value.split("$")[1];
AuStartYear = document.getElementById("hiddenWeek" + StartTD).value.split("$")[2];
AuEndYear = document.getElementById("hiddenWeek" + EndTD).value.split("$")[2];
AuditPlanStartWeek = document.getElementById("hiddenWeek" + StartTD).value.split("$")[3];
AuditPlanEndWeek = document.getElementById("hiddenWeek" + EndTD).value.split("$")[3];
xmlDates = xmlDates + "<Date>"
xmlDates = xmlDates + "<Order>" + Order + "</Order>"
xmlDates = xmlDates + "<StartDate>" + StartDate + "</StartDate>"
xmlDates = xmlDates + "<EndDate>" + EndDate + "</EndDate>"
xmlDates = xmlDates + "<PlanStartWeek>" +PlanStartWeek + "</PlanStartWeek>"
xmlDates = xmlDates + "<PlanEndWeek>" + PlanEndWeek + "</PlanEndWeek>"
xmlDates = xmlDates + "<StartYear>" + StartYear + "</StartYear>"
xmlDates = xmlDates + "<EndYear>" + EndYear + "</EndYear>"
xmlDates = xmlDates + "</Date>";
StartTD = this.id;
}
else if ((parseInt(CurrentTD) == 52 && CurrentMonthTD == 12 && CurrentTD != this.id)
|| (parseInt(CurrentTD) == 53 && CurrentMonthTD == 12 && CurrentTD != this.id)) {
EndTD = CurrentTD;
Order = AuditOrder + 1;
StartDate = document.getElementById("hiddenWeek" + StartTD).value.split("$")[0];
EndDate = document.getElementById("hiddenWeek" + EndTD).value.split("$")[1];
StartYear = document.getElementById("hiddenWeek" + StartTD).value.split("$")[2];
EndYear = document.getElementById("hiddenWeek" + EndTD).value.split("$")[2];
PlanStartWeek = document.getElementById("hiddenWeek" + StartTD).value.split("$")[3];
PlanEndWeek = document.getElementById("hiddenWeek" + EndTD).value.split("$")[3];
xmlDates = xmlDates + "<Date>"
xmlDates = xmlDates + "<Order>" + Order + "</ditOrder>"
xmlDates = xmlDates + "<StartDate>" + StartDate + "</StartDate>"
xmlDates = xmlDates + "<EndDate>" + EndDate + "</EndDate>"
xmlDates = xmlDates + "<PlanStartWeek>" + PlanStartWeek + "</PlanStartWeek>"
xmlDates = xmlDates + "<PlanEndWeek>" + PlanEndWeek + "</PlanEndWeek>"
xmlDates = xmlDates + "<StartYear>" + StartYear + "</StartYear>"
xmlDates = xmlDates + "<EndYear>" + EndYear + "</EndYear>"
xmlDates = xmlDates + "</Date>";
StartTD = this.id;
}
CurrentTD = this.id;
}
});
if (StartTD != 0) {
Order = AuditOrder + 1;
StartDate = document.getElementById("hiddenWeek" + StartTD).value.split("$")[0];
EndDate = document.getElementById(hiddenWeek).value.split("$")[1];
StartYear = document.getElementById("hiddenWeek" + StartTD).value.split("$")[2];
EndYear = document.getElementById("hiddenWeek" + CurrentTD).value.split("$")[2];
PlanStartWeek = document.getElementById("hiddenWeek" + StartTD).value.split("$")[3];
PlanEndWeek = document.getElementById("hiddenWeek" + CurrentTD).value.split("$")[3];
xmlDates = xmlDates + "<Date>"
xmlDates = xmlDates + "<Order>" +Order + "</ditOrder>"
xmlDates = xmlDates + "<StartDate>" + StartDate + "</StartDate>"
xmlDates = xmlDates + "<EndDate>" + EndDate + "</EndDate>"
xmlDates = xmlDates + "<PlanStartWeek>" + PlanStartWeek + "</PlanStartWeek>"
xmlDates = xmlDates + "<PlanEndWeek>" + PlanEndWeek + "</PlanEndWeek>"
xmlDates = xmlDates + "<StartYear>" + StartYear + "</StartYear>"
xmlDates = xmlDates + "<EndYear>" + EndYear + "</EndYear>"
xmlDates = xmlDates + "</Date>";
}
xmlDates = xmlDates + "</Data>";
this is the code they used to save. Now I am trying as follows:
<script>
var StartDate = "9-11-2015 08:00:00.000";
var EndDate = "12-12-2015 08:00:00.000";
var StartTD = 0;
var EndTD = 0;
var CurrentTD = 0;
var PlanStartWeek = "";
var PlanEndWeek = "";
var TDid = "";
var LastYearWeek
var TotPageinAdd = document.getElementById("hdnTotPageinAdd").value;
for (var r = 1; r < TotPageinAdd + 1; r++) {
$("#tblCalenderView" + r + " td").mousedown(function (ev) {
$("tr td").each(function (i, ele) {
if ($(ele).hasClass("highlightedinAdd") || $(ele).hasClass("highlightedinAddApprove")) {
if (ev.which == 3) {
TDid = this.id.split("_")[0]
if (StartTD == 0) {
StartTD = this.id;
}
//CurrentMonthTD = this.id.split("_")[1]
if (CurrentTD != 0 && (((parseInt(CurrentTD) + 1) != TDid) && (parseInt(CurrentTD) != TDid))
&& !((parseInt(CurrentTD) == 52 || parseInt(CurrentTD) == 53) && TDid == 1)) {
EndTD = CurrentTD;
Order = Order + 1;
StartDate = document.getElementById("hdnWeek" + StartTD).value.split("$")[0];
EndDate = document.getElementById("hdnWeek" + EndTD).value.split("$")[1];
StartYear = document.getElementById("hdnWeek" + StartTD).value.split("$")[2];
EndYear = document.getElementById("hdnWeek" + EndTD).value.split("$")[2];
PlanStartWeek = document.getElementById("hdnWeek" + StartTD).value.split("$")[3];
PlanEndWeek = document.getElementById("hdnWeek" + EndTD).value.split("$")[3];
xmlDates = xmlDates + "<Date>"
xmlDates = xmlDates + "<Order>" + Order + "</Order>"
xmlDates = xmlDates + "<StartDate>" + StartDate + "</StartDate>"
xmlDates = xmlDates + "<EndDate>" + EndDate + "</EndDate>"
xmlDates = xmlDates + "<PlanStartWeek>" + PlanStartWeek + "</PlanStartWeek>"
xmlDates = xmlDates + "<PlanEndWeek>" + PlanEndWeek + "</PlanEndWeek>"
xmlDates = xmlDates + "<StartYear>" + StartYear + "</StartYear>"
xmlDates = xmlDates + "<EndYear>" + EndYear + "</EndYear>"
xmlDates = xmlDates + "</Date>";
StartTD = this.id;
}
CurrentTD = this.id;
alert("Right mouse button clicked on element with id + " + $(this).attr('class')); ---just tocheck it is working or not
$("#SelectDates").attr('title', "Select Dates");
$(function () {
$("#SelectDates").dialog({
resizable: false,
position: 'center',
height: 350,
width: 400,
open: function (event, ui) {
jQuery('.ui-dialog-buttonpane').find('button:contains("' + LblYes + '")').prepend('<i class="fas fa-check-circle" style="display: inline-block;float: left;margin:0.2em;" aria-hidden="true"></i>');
jQuery('.ui-dialog-buttonpane').find('button:contains("' + LblNo + '")').prepend('<i class="fa fa-ban" style="display: inline-block;float: left;margin:0.2em;" aria-hidden="true"></i>');
$('.ui-dialog-buttonset').attr('style', 'float:left');
$('.ui-button-text-only').attr('style', 'margin:0px;');
$('input').blur();
},
close: function (event, ui) {
$(this).parent().find('.ui-dialog-buttonpane').remove();
},
modal: true,
buttons: [{
text: LblYes, "class": 'btn btn-sm btn-success', click: function () {
}
},
{
text: LblNo, "class": 'btn btn-sm btn-danger', click: function () {
$(this).dialog('close');
}
}]
});
});
}
}
});
});
}
</script>
Kindly help how to achieve this
