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\

Customize title in FullCalendar

I have some trouble with customize FullCalendar. Default title in FullCalendar its 'h2' with month, year and prev, next buttons.
I need to transform 'h2' in separate elements (p with year separately and p with month same);
And also I need change default view prev month and next month buttons to buttons with that month name.
I will be glad to any help.
Below is my code: (Month name in source is not English.)
var monthNames = ['Січень','Лютий','Березень','Квітень','Травень','Червень','Липень','Серпень','Вересень','Жовтень','Листопад','Грудень'];
var calendarDate = new Date()
var monthNum = calendarDate.getMonth();
var prevMonth = monthNames[monthNum - 1];
var nextMonth = monthNames[monthNum + 1];
$(document).ready(function() {
$('#calendar').fullCalendar({
firstDay: 1, /* первый день недели */
defaultView: 'month',
header: {
left: 'prev,next',
center: 'title',
},
viewRender: function (view, element) {
var monthNames = ['Січень','Лютий','Березень','Квітень','Травень','Червень','Липень','Серпень','Вересень','Жовтень','Листопад','Грудень'];
var currentMonth = $("#calendar").fullCalendar('getDate').month();
var customMonth = monthNames[currentMonth];
$('.fc-prev-button, .fc-next-button').click(function(){
prevMonth = monthNames[customMonth - 1];
nextMonth = monthNames[currentMonth + 1];
});
},
monthNames: ['Січень','Лютий','Березень','Квітень','Травень','Червень','Липень','Серпень','Вересень','Жовтень','Листопад','Грудень'],
monthNamesShort: ['Січ.','Лют.','Бер.','Квіт.','Трав.','Черв.','Лип.','Серп.','Вер.','Жовт.','Лис.','Груд.'],
dayNames: ["Неділя","Понеділок","Вівторок","Середа","Четвер","П'ятниця","Субота"],
dayNamesShort: ["НД","ПН","ВТ","СР","ЧТ","ПТ","СБ"],
buttonText: {
prev: prevMonth,
next: nextMonth
},
});
});
images enter image description here
enter image description here

You can leave the title empty and then inside your viewRender function, you can do this:
viewRender: function(view, element){
$('.fc-toolbar .fc-center').append('/* inside this, you can append any elements you need for your title */');
}

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';
}
}

Events not showing up in Anglular UI-Calender

I am trying to use Angular UI Calendar:
http://angular-ui.github.io/ui-calendar/
I implemented all the steps, but my events info coming from API are not getting displayed on calendar.
following is my HTML:
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-success" ng-click="changeView('agendaDay', 'myCalendar1')">Day</button>
<button class="btn btn-success" ng-click="changeView('agendaWeek', 'myCalendar1')">Week</button>
<button class="btn btn-success" ng-click="changeView('month', 'myCalendar1')">Month</button>
</div>
</div>
<div class="calendar" ng-model="eventSources" calendar="myCalendar1" ui-calendar="uiConfig.calendar" ng-click="alertOnEventClick();">
</div>
following is my controller code :
$scope.events=[];
$http.get("/ABC/ABC", {
params: {
"calenderView": 1
}
}).success(function(data, status, headers, config) {
//Declared Array for Data.
for(var i=0; i< data.eventCalender.length; i++){
$scope.events.push = {
title:data.eventCalender[i].title,
start:data.eventCalender[i].start,
end:data.eventCalender[i].end
}
}
}).
error(function(data, status, headers, config) {
SpinnerSvc.hide('globalSpinner');
});
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$scope.changeTo = 'Hungarian';
/* event source that pulls from google.com */
$scope.eventSource = {
className: 'gcal-event', // an option!
currentTimezone: 'America/Chicago' // an option!
};
/* event source that contains custom events on the scope */
/* event source that calls a function on every view switch */
$scope.eventsF = function (start, end, timezone, callback) {
var s = new Date(start).getTime() / 1000;
var e = new Date(end).getTime() / 1000;
var m = new Date(start).getMonth();
var events = [{title: 'Feed Me ' + m,start: s + (50000),end: s + (100000),allDay: false, className: ['customFeed']}];
callback(events);
};
/* alert on eventClick */
$scope.alertOnEventClick = function( date, jsEvent, view){
$scope.alertMessage = ($scope.title + ' was clicked ');
};
/* alert on Drop */
$scope.alertOnDrop = function(event, delta, revertFunc, jsEvent, ui, view){
$scope.alertMessage = ('Event Dropped to make dayDelta ' + delta);
};
/* alert on Resize */
$scope.alertOnResize = function(event, delta, revertFunc, jsEvent, ui, view ){
$scope.alertMessage = ('Event Resized to make dayDelta ' + delta);
};
/* add and removes an event source of choice */
$scope.addRemoveEventSource = function(sources,source) {
var canAdd = 0;
angular.forEach(sources,function(value, key){
if(sources[key] === source){
sources.splice(key,1);
canAdd = 1;
}
});
if(canAdd === 0){
sources.push(source);
}
};
/* add custom event*/
$scope.addEvent = function() {
$scope.events.push({
title: 'Open Sesame',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
className: ['openSesame']
});
};
/* remove event */
$scope.remove = function(index) {
$scope.events.splice(index,1);
};
/* Change View */
$scope.changeView = function(view,calendar) {
uiCalendarConfig.calendars[calendar].fullCalendar('changeView',view);
};
/* Change View */
$scope.renderCalendar = function(calendar) {
$timeout(function() {
if(uiCalendarConfig.calendars[calendar]){
uiCalendarConfig.calendars[calendar].fullCalendar('render');
}
});
};
/* Render Tooltip */
$scope.eventRender = function( event, element, view ) {
element.attr({'tooltip': event.title,
'tooltip-append-to-body': true});
$compile(element)($scope);
};
/* config object */
$scope.uiConfig = {
calendar:{
height: 480,
editable: true,
header:{
left: 'title',
center: '',
right: 'prev,next'
},
eventClick: $scope.alertOnEventClick,
eventDrop: $scope.alertOnDrop,
eventResize: $scope.alertOnResize,
eventRender: $scope.eventRender
}
};
$scope.changeLang = function() {
if($scope.changeTo === 'Hungarian'){
$scope.uiConfig.calendar.dayNames = ["Vasárnap", "Hétfő", "Kedd", "Szerda", "Csütörtök", "Péntek", "Szombat"];
$scope.uiConfig.calendar.dayNamesShort = ["Vas", "Hét", "Kedd", "Sze", "Csüt", "Pén", "Szo"];
$scope.changeTo= 'English';
} else {
$scope.uiConfig.calendar.dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
$scope.uiConfig.calendar.dayNamesShort = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
$scope.changeTo = 'Hungarian';
}
};
/* event sources array*/
$scope.eventSources = [$scope.events, $scope.eventSource, $scope.eventsF];
$scope.eventSources2 = [$scope.calEventsExt, $scope.eventsF, $scope.events];
//}

You have a syntax error when you push new event to $scope.events array. Try this:
...
for(var i=0; i< data.eventCalender.length; i++){
$scope.events.push({
title:data.eventCalender[i].title,
start:data.eventCalender[i].start,
end:data.eventCalender[i].end
});
}
...
Right now you just re-assign array push function to your event object.

Restart jQuery Countdown

Hello I'm currently working on a jQuery plugin.
http://plugins.jquery.com/kbw.countdown/
I want to restart the counter when it reaches 00:00:00 time.
<script type="text/javascript">
$(function () {
var austDay = new Date();
austDay = new Date(austDay.getFullYear() + 1, 1 - 1, 00);
$('#defaultCountdown').countdown({until: '+5s'});
$('#year').text(austDay.getFullYear());
});
</script>

You can set your target times and initialize with an expiry event like this:
$('#noon-countdown').countdown({until: getNoonCountDown(),
serverSync: serverTime, format: 'HMS',
onExpiry: function() {
$(this).countdown('change', {until: getNoonCountDown()});
}});
$('#midnight-countdown').countdown({until: getMidnightCountDown(),
serverSync: serverTime, format: 'HMS',
onExpiry: function() {
$(this).countdown('change', {until: getMidnightCountDown()});
}});
function getNoonCountDown() {
var until = new Date();
until.setHours(until.getHours() < 12 ? 12 : 36, 0, 0, 0); // Next midday
return until;
}
function getMidnightCountDown() {
var until = new Date();
until.setHours(24, 0, 0, 0); // Next midnight
return until;
}