Jqx Scheduler
Javascript:
<script type="text/javascript" src="./Scripts/jqxScheduler_files/jqxcore.js"></script>
<script type="text/javascript" src="./Scripts/jqxScheduler_files/jqxbuttons.js"></script>
<script type="text/javascript" src="./Scripts/jqxScheduler_files/jqxdata.js"></script>
<script type="text/javascript" src="./Scripts/jqxScheduler_files/jqxdate.js"></script>
<script type="text/javascript" src="./Scripts/jqxScheduler_files/jqxscheduler.js"></script>
<script type="text/javascript" src="./Scripts/jqxScheduler_files/jqxscheduler.api.js"></script>
<script type="text/javascript" src="./Scripts/jqxScheduler_files/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="./Scripts/jqxScheduler_files/jqxmenu.js"></script>
<script type="text/javascript" src="./Scripts/jqxScheduler_files/jqxcalendar.js"></script>
<script type="text/javascript" src="./Scripts/jqxScheduler_files/jqxtooltip.js"></script>
<script type="text/javascript" src="./Scripts/jqxScheduler_files/jqxwindow.js"></script>
<script type="text/javascript" src="./Scripts/jqxScheduler_files/jqxcheckbox.js"></script>
<script type="text/javascript" src="./Scripts/jqxScheduler_files/jqxlistbox.js"></script>
<script type="text/javascript" src="./Scripts/jqxScheduler_files/jqxdropdownlist.js"></script>
<script type="text/javascript" src="./Scripts/jqxScheduler_files/jqxnumberinput.js"></script>
<script type="text/javascript" src="./Scripts/jqxScheduler_files/jqxradiobutton.js"></script>
<script type="text/javascript" src="./Scripts/jqxScheduler_files/jqxinput.js"></script>
<script type="text/javascript" src="./Scripts/jqxScheduler_files/globalize.js"></script>
<script type="text/javascript" src="./Scripts/jqxScheduler_files/globalize.culture.de-DE.js"></script>
<script type="text/javascript" src="./Scripts/jqxScheduler_files/demos.js"></script>
<script type="text/javascript" src="./Scripts/jqxScheduler_files/jqxscrollbar.js"></script>
Html:
<link rel="stylesheet" href="./Scripts/jqxScheduler_files/jqx.base.css" type="text/css">
<link rel="stylesheet" href="./Scripts/jqxScheduler_files/jqx.light.css" type="text/css">
<div id="scheduler"></div>
JavaScript
<script type="text/javascript">
$(document).ready(function()
{
if($Context.inputs.MachineNameListCount !=0)
{
//Variable Declarations
var appointments = new Array();
var i;
var subject;
var tooltip;
//To Define Machine Wise Color scheme
var colorScheme='scheme02';
//Machine List
for(i=0; i<$Context.inputs.MachineNameListCount; i++)
{
var MachineList =
{
id: $Context.inputs.MachineNameList[i] + "_" + i,
description: "JqxScheduler",
subject: subject,
calendar: $Context.inputs.MachineNameList[i],
start: '01/01/2019 00:00:00',
end: '01/01/2019 00:00:00',
color: "#000",
background: "#ddd",
borderColor: "#ddd",
tooltip: "Machine",
completedata: "Machine",
resizable: false,
draggable: false
}
appointments.push(MachineList);
}
//Allocation Details
var count = $Context.inputs.Count;
var LastallocatedId = null;
var loop_Currentdate = null;
var date = $Context.inputs.LastAllocatedDate.split('T');
var time = date[1].split('-');
time = time[0].split('+');
var Last_Allocateddate = new Date((date[0] +'T'+ time[0]).toLocaleString()).format('yyyy-MM-dd HH:mm');
for(i=0; i<count; i++)
{
if($Context.inputs.WipOrderNo[i] != '')
{
tooltip = $Context.inputs.WipOrderNo[i];
subject = $Context.inputs.WipOrderNo[i];
}
else
{
tooltip = $Context.inputs.ActivityName[i];
subject = $Context.inputs.ActivityName[i];
}
loop_Currentdate = new Date($Context.inputs.StartDate[i].split("+")[0]).format('yyyy-MM-dd HH:mm');
if(Last_Allocateddate == loop_Currentdate)
{
LastallocatedId = $Context.inputs.LastAllocatedMachine + "_" + i;
}
var Sdate = $Context.inputs.StartDate[i].split('T');
var Stime = Sdate[1].split('-');
Stime = Stime[0].split('+');
var FinalStartDate = Sdate[0] +'T'+ Stime[0];
var Edate = $Context.inputs.EndDate[i].split('T');
var Etime = Edate[1].split('-');
Etime = Etime[0].split('+');
var FinalEndDate = Edate[0] +'T'+ Etime[0];
var obj =
{
id: $Context.inputs.MachineName[i] + "_" + i,
description: "JqxScheduler",
subject: subject,
calendar: $Context.inputs.MachineName[i],
start: FinalStartDate,
end: FinalEndDate,
color: "#000",
background: $Context.inputs.Background[i],
borderColor: $Context.inputs.Background[i],
tooltip: tooltip,
completedata: $Context.inputs.WipOrderType[i] + '~' + $Context.inputs.ActivityID[i] + '~' + $Context.inputs.ActivityName[i] + '~' + $Context.inputs.MachineName[i] + '~' + $Context.inputs.StartDate[i] + '~' + $Context.inputs.EndDate[i] + '~' + $Context.inputs.Status[i] + '~' + $Context.inputs.OrderNo[i] + '~' + $Context.inputs.BatchId[i] + '~' + $Context.inputs.Quantity[i],
resizable: false,
draggable: false
};
appointments.push(obj);
}
// prepare the data
var source = {
dataType: "array",
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'description', type: 'string' },
{ name: 'location', type: 'string' },
{ name: 'subject', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date', format: "yyyy-MM-dd HH:mm" },
{ name: 'end', type: 'date', format: "yyyy-MM-dd HH:mm" },
{ name: 'color', type: 'string' },
{ name: 'background', type: 'string' },
{ name: 'borderColor', type: 'string' },
{ name: "tooltip", type:'string' },
{ name: 'completedata', type: 'string' },
{ name: 'resizable', type: 'boolean' },
{ name: 'draggable', type: 'boolean' }],
id: 'id',
localData: appointments
};
var adapter = new $.jqx.dataAdapter(source);
var date = $Context.inputs.LastAllocatedDate;
if(date.split('T')[0] != '1900-01-01')
{
var val = new Date(date).format('yyyy-MM-dd')
date = new $.jqx.date(val);
}
else
{
date = new $.jqx.date();
}
$Context.outputs.SelectedDate = new Date(date).format('yyyy-MM-dd');
$("#scheduler").jqxScheduler({
date: date,
width: '100%',
height: '100%',
rowsHeight: 75,
dayNameFormat: "abbr",
source: adapter,
showLegend: false,
contextMenu: false,
editDialog: false,
//timeZone: 'UTC',
ready: function()
{
//Focus Current Time
var columnsWidth = $('#scheduler ').jqxScheduler('columnsHeight');
var CurrentHour = (new Date()).getHours()-2;
$("#scheduler").jqxScheduler('scrollLeft', CurrentHour * 4 * columnsWidth);
//Focus Last Allocated Apponitment
if(LastallocatedId !=undefined && LastallocatedId != null)
{
$("#scheduler").jqxScheduler('ensureAppointmentVisible', LastallocatedId);
}
},
resources: {
colorScheme: colorScheme,
dataField: "calendar",
orientation: "vertical",
source: new $.jqx.dataAdapter(source)
},
appointmentDataFields: {
from: "start",
to: "end",
id: "id",
description: "description",
location: "place",
subject: "subject",
resourceId: "calendar",
color: "color",
background: "background",
borderColor: "borderColor",
tooltip: "tooltip",
completedata: "completedata",
draggable: "draggable",
resizable: "resizable"
},
view: 'timelineDayView',
views: [{
type: 'timelineDayView',
appointmentsRenderMode: "exactTime",
timeRuler: { scale: "tenMinutes", formatString: "hh:mm tt"},
timeSlotWidth: 10,
appointmentHeight: 25
}]
});
}
//Appointment Click
$('.jqx-scheduler-appointment').live('click', function()
{
$('tr.Machines').removeClass("SelectedMachines");
$Context.outputs.SelectedMachine = null;
var data= $(this).attr('completedata');
var wipordertype = data.split('~')[0];
var ActivityID = data.split('~')[1];
var ActivityName = data.split('~')[2];
var LineAllocated = data.split('~')[3];
var StartDate = data.split('~')[4];
var EndDate = data.split('~')[5];
/*var Sdate = data.split('~')[4].split('T');
var Stime = Sdate[1].split('-');
Stime = Stime[0].split('+');
var StartDate = Sdate[0] +'T'+ Stime[0];
var Edate = data.split('~')[5].split('T');
var Etime = Edate[1].split('-');
Etime = Etime[0].split('+');
var EndDate = Edate[0] +'T'+ Etime[0];*/
var Status = data.split('~')[6];
StartDate = new Date(StartDate.toLocaleString()).format('yyyy-MM-dd HH:mm');
EndDate = new Date(EndDate.toLocaleString()).format('yyyy-MM-dd HH:mm');
if(wipordertype != undefined && wipordertype != 26 && wipordertype != 27 && Status != 3)
{
$("button[value='UPDATEALLOCATION']").prop("disabled", false);
if(wipordertype == 0)
{
$Context.outputs.UpdateButtion = "UPDATEMANUALACTIVITY";
}
else if((wipordertype == 1 || wipordertype == 14) && Status == 100040)
{
$Context.outputs.UpdateButtion = "UPDATELINEFORSTOPPEDBATCH";
}
else if((wipordertype == 1 || wipordertype == 14) && Status == 2)
{
$("button[value='UPDATEALLOCATION']").prop("disabled", true);
}
else if(wipordertype == 14)
{
$Context.outputs.Update_Activity = "AGGREGATIONUPDATE";
$Context.outputs.UpdateButtion = "UPDATEAGGREGATEDALLOCATION";
}
else if(Status == 1)
{
$Context.outputs.Update_Activity = "ALLOCATIONUPDATE";
$Context.outputs.UpdateButtion = "UPDATELINEALLOCATION";
}
}
else
{
$("button[value='UPDATEALLOCATION']").prop("disabled", true);
}
$Context.outputs.WipOrderNo = ActivityID;
$Context.outputs.ActivityID = ActivityID;
$Context.outputs.ActivityName = ActivityName;
$Context.outputs.LineAllocated = LineAllocated;
$Context.outputs.ManualStartDate = StartDate;
$Context.outputs.ManualEndDate = EndDate;
$Context.outputs.Update_ActivityID = ActivityID;
$Context.outputs.Update_LineAllocated = LineAllocated;
$Context.outputs.Update_ManualStartDate = StartDate;
});
//Appointment double click
$("#scheduler").on('dblclick', function (event)
{
var content = event.target.innerText;
if(content != '')
{
$('#scheduleWindow').jqxWindow('open');
$('#scheduleWindowHeader span').text("Allocation Details");
$('#schedulerWindowContent span').html(content.replace(/;/g, '</br>'));
}
});
//OutSide Click
$('.jqx-widget .jqx-grid-cell').live('click', function()
{
$('tr.Machines').removeClass("SelectedMachines");
$Context.outputs.SelectedMachine = null;
$("button[value='UPDATEALLOCATION']").prop("disabled", true);
$('#scheduleWindow').jqxWindow('close');
});
// Grid Check box Change Event
$(".DynamicGrid table tbody").delegate("tr", "click", function()
{
var SelectedCount = $('.DynamicGrid table tbody tr.selected').length
if(SelectedCount == 1 && $(this).attr('class') == 'selected')
{
$("button[value='ALLOCATETOLINEROUTE']").prop("disabled", true);
}
else
{
$("button[value='ALLOCATETOLINEROUTE']").prop("disabled", false);
}
});
//Date Change
$("#scheduler").on('dateChange', function (event)
{
var args = event.args;
var date = new $.jqx.date(args.date).toString();
call_PRY_LineAllocationDetailsBasedonDate($Context, $Context.inputs.Department, date); // '5/09/2019 6:04:49 PM'
$Context.outputs.SelectedDate = date;
});
//Select Machine
$('table tbody tr.Machines').live('click', function()
{
$('tr.Machines').removeClass("SelectedMachines");
$(this).addClass("SelectedMachines");;
$Context.outputs.SelectedMachine = $(this).closest("tr").find('td').text();
});
//To display Last Allocation Detail
var AllocationDetails = '';
var LastAllocatedMachine = $Context.inputs.LA_LastAllocatedMachine;
var LAdate = $Context.inputs.LA_LastAllocatedDate.split('T');
var LAtime = LAdate[1].split('-');
LAtime = LAtime[0].split('+');
var _CompleteDate = new Date(LAdate[0]);
var _Date = _CompleteDate.getDate();
_Date = _Date < 10 ? '0' + _Date : _Date;
var _Month = _CompleteDate.getMonth() + 1;
_Month = _Month < 10 ? '0' + _Month : _Month;
var _Year = _CompleteDate.getFullYear();
var _Hour = parseInt((LAtime[0].split(':'))[0]);
_Hour = _Hour > 12 ? _Hour - 12 : _Hour;
_Hour = _Hour < 10 ? '0' + _Hour : _Hour;
var _Minute = parseInt((LAtime[0].split(':'))[1]);
_Minute = _Minute < 10 ? '0' + _Minute : _Minute;
var _AmPm = parseInt((LAtime[0].split(':'))[0]) >= 12 ? 'PM' : 'AM';
var _FormatedDate = '';
if($Context.inputs.LanguageID == '1033')
_FormatedDate = _Month + "/" + _Date + "/" + _Year + " " + _Hour + ":" + _Minute + " " + _AmPm ;
else
_FormatedDate = _Date + "/" + _Month + "/" + _Year + " " + _Hour + ":" + _Minute + " " + _AmPm ;
//var LAFinaldate = LAdate[0] +'T'+ LAtime[0];
//dateFormat($Context.inputs.LA_LastAllocatedDate, "mm/dd/yyyy, hh:MM:ss TT");
//var LastAllocatedDate = new Date(LAFinaldate).toLocaleString();
var LastAllocatedDate = _FormatedDate;
var AllocationRemoved = $Context.inputs.LA_AllocationRemoved;
if(LastAllocatedMachine != '')
{
if(AllocationRemoved == "YES")
{
AllocationDetails = $Context.inputs.LastRemovedItem + ': <b> ' + LastAllocatedMachine + '</b> ' + $Context.inputs.LastAllocationStartTime + ': <b>' + LastAllocatedDate + '</b>';
}
else
{
AllocationDetails = $Context.inputs.LastAllocatedItem + ': <b> ' + LastAllocatedMachine + '</b> ' + $Context.inputs.LastAllocationStartTime + ': <b>' + LastAllocatedDate + '</b>';
}
}
$('.fc_LastAllocationDetails').html(AllocationDetails);
});
Time with After Page Load
//After Page Load
var id = setInterval(function()
{
var selectedcount = $('.PRY_LineAllocationOrderDetails .DynamicGrid table tbody').find('tr.selected').length;
if(selectedcount > 0)
{
clearInterval(id);
$("button[value='ALLOCATETOLINEROUTE']").prop("disabled", false);
}
},2000)
