Develop Reference

Need help, want to display different events for each day in fullcalendar

I want to display different event for each day in fullcalendar from a json encoded array.
if employees offday exist display offdays which is coming from another table in json encoded array.
First query return:
"[
{"id":4901,"title":4901,"start":"2018-01-01","end":"2019-04-30"},
{"id":4901,"title":4901,"start":"2018-01-01"
]"
Second query:
"[
{"id":4901,"offday":0},
{"id":4901,"offday":6}
]"
Blade view jquery fulcalendar code:
var emps = {!! $emps !!};
var empsoffdays = {!! $emps_offdays !!};
var startdate = emps[0].start;
var enddate = emps[0].end;
var stdate = new Date(startdate);
var st = stdate.getTime();
var endate = new Date(enddate);
var en = endate.getTime();
//console.log(endate);
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
events: [
{
title : '',
start : startdate,
end :enddate,
allDay : false // will make the time show
}
]
});
$('#calendar').fullCalendar( 'addEventSource',
function(start, end,timezone,callback) {
// When requested, dynamically generate a
// repeatable event for every monday.
var events = [];
var monday = 1;
var one_day = (24 * 60 * 60 * 1000);
for (loop = stdate.getTime();
loop <= endate.getTime();
loop = loop + one_day) {
var column_date = new Date(loop);
if (column_date.getDay() == 1) {
events.push({
title: emps[0].timetable_check_in,
start: startdate,
end: enddate,
allDay: false
});
}
}
callback( events );
}
);
each day should display tile which is timetable timing and offdays should diplay title offday from start date to end date[what i was able to achive][1\

Set the min date of the other datepicker 1 day ahead of my first datepicker

I'm using Materializecss. Now I'm creating a hotel reservation system. What I want is, when I select a date on my DateIn Datepicker, the DateOut Datepicker min date should be 1 day ahead of the date selected. At first selection it is working. But when I try to select a date of check in higher than the selected date out, the min date for dateout picker wont change.
$('#dp_ci').pickadate(
{
selectMonths: true, // Creates a dropdown to control month
min : new Date(),
clear: 'Clear',
close: 'Ok',
closeOnSelect: false // Close upon selecting a date,
});
$('#dp_ci').change(function(){
selected_ci_date ="";
selected_ci_date = $('#dp_ci').val();
if (selected_ci_date != null)
{
var cidate = new Date(selected_ci_date);
alert(cidate);
$("#dp_co").val("");
$("#dp_co").removeAttr("disabled");
min_codate = "";
min_codate = new Date();
min_codate.setDate(cidate.getDate()+1);
$('#dp_co').pickadate(
{
min : min_codate,
selectMonths: true, // Creates a dropdown to control month
clear: 'Clear',
close: 'Ok',
closeOnSelect: false // Close upon selecting a date,
});
$('#dp_co').change(function(){
if ($('#dp_co').val() != null)
{
var ci = new Date($('#dp_ci').val());
var co = new Date($('#dp_co').val());
var noOfdays = co.getDate() - ci.getDate() ;
alert(noOfdays);
}
});
}
})
EDIT:
Example:
1st Select:
dp_ci: September 27, 2017 (selected)
dp_co(min): September 28, 2017 (the dates behind are disabled)
dp_co: September 28, 2017 (selected)
2nd Select:(I will select on dp_ci again)
dp_ci: September 29, 2017 (selected)
dp_co(min): September 28, 2017 (still which was supposed to be September 29)
UPDATE: I found an answer that was able to solve my problem. One only thing is the min date of the dp_co shouldn't allow same date with dp_ci: any solutions?
$('#dp_ci').pickadate(
{
selectMonths: true, // Creates a dropdown to control month
today: 'Today',
clear: 'Clear',
close: 'Ok',
min: new Date()
});
var from_$input = $('#dp_ci').pickadate(),
from_picker = from_$input.pickadate('picker')
var to_$input = $('#dp_co').pickadate(),
to_picker = to_$input.pickadate('picker')
// Check if there’s a “from” or “to” date to start with.
if ( from_picker.get('value') )
{
to_picker.set('min', from_picker.get('select'))
}
if ( to_picker.get('value') )
{
from_picker.set('max', to_picker.get('select'))
}
// When something is selected, update the “from” and “to” limits.
from_picker.on('set', function(event)
{
if ( event.select )
{
to_picker.set('min', from_picker.get('select'))
}
else if ( 'clear' in event )
{
to_picker.set('min', false)
}
})
to_picker.on('set', function(event)
{
if ( event.select )
{
from_picker.set('max', to_picker.get('select'))
}
else if ( 'clear' in event )
{
from_picker.set('max', false)
}
})
Got the code here:CodePen

You need to save the picker object on both the start-picker and end-picker, and when the startpicker change - you only need to set the min value of the end picker:
var startdate = $('#dp_ci').pickadate('picker');
var enddate = $('#dp_co').pickadate('picker');
$('#dp_ci').change(function() {
if (selected_ci_date != null) {
enddate.set('min', min_codate);
}
})
Here is the complete example:
$('#dp_ci').pickadate({
selectMonths: true, // Creates a dropdown to control month
min : new Date(),
clear: 'Clear',
close: 'Ok',
closeOnSelect: false // Close upon selecting a date,
})
var startdate = $('#dp_ci').pickadate('picker');
$('#dp_co').pickadate({
min : new Date(),
selectMonths: true, // Creates a dropdown to control month
clear: 'Clear',
close: 'Ok',
closeOnSelect: false // Close upon selecting a date,
})
var enddate = $('#dp_co').pickadate('picker');
$('#dp_ci').change(function() {
selected_ci_date ="";
selected_ci_date = $('#dp_ci').val();
if (selected_ci_date != null) {
var cidate = new Date(selected_ci_date);
alert(cidate);
$("#dp_co").val("");
$("#dp_co").removeAttr("disabled");
min_codate = "";
min_codate = new Date();
min_codate.setDate(cidate.getDate()+1);
enddate.set('min', min_codate);
}
})
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<div class = "row">
<div class ="col s6">
<label>Date of Check-in </label>
<input type="text" class="datepicker" id="dp_ci">
</div>
<div class ="col s6">
<label>Date of Check-out </label>
<input disabled="true" type="text" class=" datepicker" id="dp_co">
</div>
</div>

$('#txt_performanceDayFlex1').daterangepicker({
"locale": {
"format": "MM/DD/YY"
},
singleDatePicker: true,
minDate: new Date()
}, function (start, end, label) {
$scope.PerformanceStartDate = start.format('MM/DD/YY');
$scope.minimumDate = minimumFormatRequestDate( $scope.PerformanceStartDate);
LodaDate(); //You need to reload the End Date then it Behave Properly and you can add one day head in $scope.minimumDate this in same format
ResetDateAndtime(1);
$scope.$apply();
});
function LodaDate() {
$('#txt_performanceDayFlex2').daterangepicker({
"locale": {
"format": "MM/DD/YY"
},
singleDatePicker: true,
minDate: $scope.minimumDate,
endDate: new Date()
}, function (start, end, label) {
$scope.PerformanceEndDate = start.format('MM/DD/YY');
$scope.$apply();
});
function minimumFormatRequestDate(date) {
if (date != undefined && date != null) {
var newDate = date.split('.').reverse().join('/')
var d = new Date(newDate),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
return [day, month, year].join('-');
} else {
return 'NA';
}
}

jQuery Calender UI datepicker doesn't work when we click ESC key, calendar not working after 1st click on IE and Safari

When I click first on JQuery calendar it will display the calendar and if i select date it works smoothly. But When I press the Esc after displaying calendar instead of selecting date, it disappears but I cant get click next time onward.
It works fine in Chrome and Firefox but IE and Safari I cant click second time if i click on ESC after click on first time.
Is there anyone faced this problem? or any solution can suggest for this.
I am using jquery-ui-calendar as below details.
/*! jQuery UI - v1.11.4 - 2016-06-30
* http://jqueryui.com
* Includes: core.js, datepicker.js
* Copyright jQuery Foundation and other contributors; Licensed MIT */
Below is my JS code:
/* This Section Custom Calendar*/
$(document).ready(function() {
// jquery date picker
$(function () {
if ($(window).width() < 768) {
$.datepicker.setDefaults({
changeMonth: false,
changeYear: false,
dateFormat: customFormat(),
defaultDate: +0,
minDate: 0,
maxDate: '+364d',
numberOfMonths: 1,
showAnim: 'fadeIn',
showButtonPanel: true
});
}
else {
// Set default datepicker options
$.datepicker.setDefaults({
changeMonth: false,
changeYear: false,
dateFormat: customFormat(),
defaultDate: +0,
minDate: 2,
maxDate: '+364d',
numberOfMonths: 2,
showAnim: 'fadeIn',
showButtonPanel: true
});
}
// Calendar 1
$(function () {
$(function () {
$('#arrivaldate').datepicker({
onSelect: function (dateText, instance) {
var arrivaldateold = CleanDate($("#arrivaldate").val());
var arrdatenew = $.datepicker.parseDate(customFormat(), arrivaldateold);
var arrday = arrdatenew.getDate();
var arrmon = (arrdatenew.getMonth() + 1);
var arrYear = arrdatenew.getFullYear()
if (arrday.toString().length==1){arrday="0"+arrday;}
if (arrmon.toString().length==1){arrmon="0"+arrmon;}
var arrivaldatenew = arrday + "/" + arrmon + "/" + arrYear;
$("#calendararr").val(arrivaldatenew);
// Populate checkout date field
var nextDayDate = $('#arrivaldate').datepicker('getDate', '+3d');
nextDayDate.setDate(nextDayDate.getDate() + 1);
$("#arrivaldate").val(FormatDate(arrivaldatenew));
$('#depaturedate').datepicker('setDate',nextDayDate );
$("#depaturedate").val(ChangeDateFormat(nextDayDate));
},
onClose: function () {
$("#depaturedate").datepicker("show");
}
});
});
// Set checkout datepicker options
$(function () {
$('#depaturedate').datepicker({
// Prevent selecting checkout date before arrival:
beforeShow: customRange
});
});
function customRange(a) {
var deptdateold = CleanDate($("#depaturedate").val());
var deptdatenew = $.datepicker.parseDate(customFormat(), deptdateold);
var dptday = deptdatenew.getDate();
var dptmon = (deptdatenew.getMonth() + 1);
var dptYear = deptdatenew.getFullYear()
if (dptday.toString().length==1){dptday="0"+dptday;}
if (dptmon.toString().length==1){dptmon="0"+dptmon;}
var departuredatenew = dptday + "/" + dptmon + "/" + dptYear;
$("#calendardept").val(departuredatenew);
// changes done by parul starts for 30 days limit
var SelectedDate = CleanDate($("#arrivaldate").val());
var date1 = $.datepicker.parseDate(customFormat(), SelectedDate);
var d = new Date();
var diff = date1 - d;
diff = (diff / (1000 * 3600 * 24));
var maxdiff = parseInt(diff);
maxdiff = maxdiff + 31;
var b = new Date();
var c = new Date(b.getFullYear(), b.getMonth(), b.getDate());
if (a.id == 'depaturedate') {
if ($('#arrivaldate').datepicker('getDate') != null) {
//c = $('#arrivaldate').datepicker('getDate', '+3d');
b = CleanDate($("#arrivaldate").val());
c = $.datepicker.parseDate(customFormat(), b);
c.setDate(c.getDate() + 1);
}
}
return {
minDate: c,
maxDate: maxdiff + "d"
} // changes done by parul ends
}
});
$("#depaturedate").change(function () {
var deptdateold = CleanDate($("#depaturedate").val());
var deptdatenew = $.datepicker.parseDate(customFormat(), deptdateold);
var dptday = deptdatenew.getDate();
var dptmon = (deptdatenew.getMonth() + 1);
var dptYear = deptdatenew.getFullYear()
if (dptday.toString().length==1){dptday="0"+dptday;}
if (dptmon.toString().length==1){dptmon="0"+dptmon;}
var departuredatenew = dptday + "/" + dptmon + "/" + dptYear;
$("#calendardept").val(departuredatenew);
$("#depaturedate").val(ChangeDateFormat(deptdatenew));
});
$( "#c_checkout" ).click(function() {
$("#depaturedate").datepicker("show");
});
$( "#c_checkin" ).click(function() {
$("#arrivaldate").datepicker("show");
});
});
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 2);
var tomorrow = new Date(tomorrow).toLocaleDateString('en-GB',
{
day : 'numeric',month : 'short', year : 'numeric'
}).split(' ').join(' ');
$('#arrivaldate').val(tomorrow);
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 3);
var tomorrow = new Date(tomorrow).toLocaleDateString('en-GB',
{
day : 'numeric',month : 'short', year : 'numeric'
}).split(' ').join(' ');
$('#depaturedate').val(tomorrow);
}); //JQuery Document Ready Section Finished Here

show future date and time

I want to show the future date and time in the date and time field components.
Below is the sample code:
require([
"dojo/_base/lang", "dijit/registry", "dojo/ready", "dijit/form/TimeTextBox", "dojo/parser"
], function(lang, registry, ready) {
ready(function() {
var time = registry.byId("time");
time.set("constraints", lang.mixin(time.get("constraints"), {
min: 'T08:00:00'
}));
});
});
In the above code min constraint is used to disable time before 8:00AM , but i want to disable the past time and if user selects future date the time should not disable.Please suggest. Thanks.
--EDITED--
jsp page:
Date<input type="hidden" name="userDate" value="${myDTO.USER_DATE}"/> <input name="USER_DATE" id="oracle" value="${myDTO.USER_DATE}" required="true"/>
Time: <input type="hidden" name="userTime" value="${myDTO.USER_TIME}"/> <input id="time" data-dojo-type="dijit/form/TimeTextBox" onChange="require(['dojo/dom'], function(dom){dom.byId('val').value=dom.byId('time1').value.toString().replace(/.*1970\s(\S+).*/,'T$1')})"
data-dojo-props="constraints: { timePattern: 'HH:mm:ss', clickableIncrement: 'T00:15:00', visibleIncrement: 'T00:15:00', visibleRange: 'T01:00:00' }" />
js:
require(["dijit/form/TimeTextBox", "dojo/domReady!"], function(TimeTextBox){
function showTimeValue(){
try{
dom.byId('val').value = document.getElementsByName('time')[0].value;
}catch(err){}
}
new TimeTextBox({
name: "time",
value: document.getElementsByName('userTime')[0].value,
onChange: function(v){ setTimeout(showTimeValue, 0);},
constraints: {
timePattern: 'HH:mm:ss',
clickableIncrement: 'T00:15:00',
visibleIncrement: 'T00:15:00',
visibleRange: 'T01:00:00'
}
}, "time").startup();
showTimeValue();
});
// for Dynamic date value
//code for Date field
// ....
new OracleDateTextBox({
value: document.getElementsByName('userDate')[0].value,
name: "oracle",
required: true,
onChange: function(v){ ...}

You can achieve this by accessing your time element inside the onchange callback of your DateTextBox. You will need to inject all the time widget dependencies into your second require statement. When the date changes, check if it is today and otherwise allow the user to select all time slots.
Here is an updated fiddle: http://jsfiddle.net/8o23tbLu/1/
onChange: function(v){
var useMin, now, time, pad;
pad = function(n) {
n = n + '';
return n.length >= 2 ? n : new Array(2 - n.length + 1).join('0') + n;
}
useMin = 'T00:00:00';
now = new Date();
if ((now.getDate() === v.getDate()) &&
(now.getYear() === v.getYear()) &&
(now.getMonth() === v.getMonth())
){
var hour = pad(now.getHours());
var minute = pad(now.getMinutes());
useMin = 'T' + hour + ':' + minute + ':00';
}
time = registry.byId("time");
time.set("constraints", lang.mixin(time.get("constraints"), {
min: useMin
}));
setTimeout(showServerValue, 0);
}

Highlight <TR> entire week datepicker

I have a datepicker that is fully functional and is working whereby you can select an entire commencing working week (Mon-Fri). What I am now trying to do is extend it a little further so that when I click on a specific week. It will highlight that entire . I have it paritally working which looks like the following: Calandar preivew. It can be seen that the problem I am having is that the table row to me seems to be doing a odd, even, odd even. As for the first week I highlight the row is highlighted in red and the cells are hihglighted in yellow. Then the week afer that it work fines and then if I was to select the week after that the same would be repeated. I tried checking the jquery-ui-1.8.4.custom.css and the jquery-ui.css, and had no luck. What seems to confuse me is why are the cells being highlighted in yellow? The code follows for my datepicker.
Javascript:
$(function()
{
var startDate;
var endDate;
var selectCurrentWeek = function()
{
window.setTimeout(function () { $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')}, 1);
}
function check(d) {
if(d.length() == 2) {
dd = d;
return dd;
} else {
dd = "0" + myDateParts[0];
return dd;
}
}
var selectedWeek;//remember which week the user selected here
$('.week-picker').datepicker( {
beforeShowDay: $.datepicker.noWeekends,
showOtherMonths: true,
selectOtherMonths: true,
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
var dateFormat = 'yy-mm-dd'
var newDate = $('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
var oldDate = document.getElementById('startDate');
var date_textnode = oldDate.firstChild;
var date_text = date_textnode.data;
myDateParts = date_text.split("-");
var dd = myDateParts[2];
var mm = myDateParts[1];
var yy = myDateParts[0];
selectCurrentWeek();
window.location.href = "/timesheet?week_commencing=" + yy + "-" + mm + "-" + dd;
},
beforeShowDay: function(date) {
var cssClass = '';
if(date >= startDate && date <= endDate)
cssClass = 'ui-datepicker-current-day';
return [true, cssClass];
},
onChangeMonthYear: function(year, month, inst) {
selectCurrentWeek();
}
});
$( ".week-picker" ).datepicker().click(function(event) {
// highlight the TR
$(".ui-datepicker-current-day").parent().addClass('highlight');
// highlight the TD > A
$(".ui-datepicker-calendarr-day").siblings().find('a').addClass('white');
});
$('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
$('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});
HTML
<div class="datepicker borderbox">
<b><center>Hours for Week commencing: <span id="startDate"></span></center></b>
<div class="week-picker"></div>
</div>
CSS
.highlight {
border: 1px solid red;
}
.white {
background: white !important;
}
I have tried looking at the following stackoverflow question Related stackoverflow. Had no luck with this, as the link was broken and also tried viewing the it in JSfiddle. Further to this the way I have set my datepicker is different.
I am intially trying to get my calendar to work like this But for some reason when I try do this I get the following. Is this something to do with the css
Update2
Calendar & Firebug output

Is this what you want?
http://jsfiddle.net/william/YQ2Zw/2/
There were a couple of things that went wrong:
The ui-datepicker-current-day class was applied to a <td> element, so it only needs to travel one level up to find the <tr>, so I took away one call to parent():
$(".ui-datepicker-current-day").parent().addClass('highlight');
You set multiple days with the ui-datepicker-current-day class. That was why I needed to use the :eq(0) selector to only select the first element:
$(".ui-datepicker-current-day:eq(0)").siblings().find('a').addClass('white');
Also, you were calling the wrong class for the statement above.