We Keep Coding

How can I set time limit in calendar?

I am using https://ui.toast.com/tui-calendar Toast Calender I just want show 09:00-17:00 in this calendar. It works on my PC but it shows me full time,
but It doesn't have options for limit.
this calendar can not set custom limit times?
Script
const week = {
hourStart: 9,
hourEnd: 17
};
var Calendar = tui.Calendar;
var calendar = new Calendar('#calendar', {
defaultView: 'week',
taskView: false,
useCreationPopup: false,
useDetailPopup: true,
allDaySlot: false,
droppable: false,
template: {
monthDayname: function(dayname) {
return '<span class="calendar-week-dayname-name">' + dayname.label + '</span>';
}
}
});
document.getElementById('my-today-button').addEventListener('click', function() {
calendar.today();
});
document.getElementById('my-next-button').addEventListener('click', function() {
calendar.next();
});
document.getElementById('my-prev-button').addEventListener('click', function() {
calendar.prev();
});
document.getElementById('weekView').addEventListener('click', function() {
calendar.changeView('week', true);
});
document.getElementById('monthView').addEventListener('click', function() {
calendar.changeView('month', true);
});

FullCalendar end date null whenever event is not changed even though allday false

Does anybody know why is the end date null on those "allday=false" events?
Fiddle Sample: https://jsfiddle.net/L1g0z3jd/
I instantiate it differently from the start date, it shows just fine in the calendar view, but for some reason I can't understand whenever i get clientEvents, even thought i have not changed it, I got a null in the event end date!
PS: Just for the sake of "conscience" I must add ... I'm using and old version of google chrome (v 57.0.2987.133 64-bit) and an old ubuntu version (Linux Mint 18.1 Serena)
Its getting me crazy! Thanks!
HTML Code:
<button onclick="javascript:getEvents()">Get Events</button>
<div id='calendar'></div>
Javascript Code:
$(function() {
$('#calendar').fullCalendar({
header: false,
allDaySlot: false,
visibleRange: {start: moment('2000-01-02'), end: moment('2000-01-09')},
editable: true,
selectable: true,
views: {
settimana: {
type: 'agenda',
columnFormat: 'ddd',
hiddenDays: []
}
},
defaultView: 'settimana',
defaultDate: $.fullCalendar.moment().startOf('week'),
slotMinutes: 30,
events: [
$.fn.getAgendaWorktime(1, "08:00:00", 60),
$.fn.getAgendaWorktime(2, "08:30:00", 120),
],
select: function(startDate, endDate) {
$('#calendar').fullCalendar('renderEvent', {
title: 'free time',
start: startDate.format(),
end: endDate.format(),
allDay: false
});
},
eventClick: function(calEvent, jsEvent, view) {
console.log(calEvent, jsEvent, view);
if(doubleClick==calEvent._id){
if (confirm('Delete it?')) {
$('#calendar').fullCalendar('removeEvents',calEvent._id);
}
doubleClick = null;
}else{
doubleClick=calEvent._id;
}
},
});
});
function getEvents() {
var e=0,err=false,$data = []
$('#calendar').fullCalendar('clientEvents').forEach(periodo => {
if (periodo.end==null || periodo.start.format().substr(0,10)!=periodo.end.format().substr(0,10)) {
if (e==0) {
err = true;
e++;
alert('Event startint at '+periodo.start.format()+' cant spread to multiple days');
}
} else {
$data.push({'ini': periodo.start.format(), 'fim': periodo.end.format()});
}
});
alert($data);
}
jQuery.fn.getAgendaWorktime = function ($dow, $start, $elapsed) {
var r = {
allDay: false,
title: 'free time',
start: new Date('2000-01-02 '+$start),
end: new Date('2000-01-02 '+$start)
};
r.start.setDate(r.start.getDate()+$dow);
r.end.setDate(r.end.getDate()+$dow);
r.end.setHours(r.end.setHours()+($elapsed*60));
return(r);
}

I figured out how to solve the question, I will reply to it here for I have not found any workaround or further analysis of the problem in the internet ....
I didn't review my problem to determine if it was specific related to the fact that I was setting the event's end time incorrectly and the calendar wasn't giving me any errors on the issue or anything else, but if you're gowing by the same road i went i can tell you:
Check to see if the end time is been created corretly (that seams to be my real mistaken, I was using setHours instead getHours in the getAgendaWorktime function, which turned the final value to be null. I corrected it in the sample below, but let it incorrectly in the fiddle to show the use of the forceEventDuration attribute);
Set "forceEventDuration" parameter to "true" (that forces the "end" attribute to always be filled easying me up in my code for I can always awaits for an string from ".format()" method of the attibute);
for meny reasons fullcalendar.io some times does not sets the event end date and this was getting me problems whenever avaluating the event end time (Ok, I could work around it but I was intrigged for why does it was getting me those results when it sould not, and the answare was a buged code). With "forceEventDuration: true" fullcalendar gave me the end time every time therefor i could find out that the input method i was using was seting the end date incorrectly and gave me the chance to correct it as well.
Links related:
Calendar parameter documentation https://fullcalendar.io/docs/forceEventDuration
Corrected Fiddle https://jsfiddle.net/gjrfox05/
I hope this answer could be of some help for newcomers at fullcalendar.io as me.
Fiddle Javascript part corrected sample:
$(function() {
$('#calendar').fullCalendar({
header: false,
allDaySlot: false,
forceEventDuration: true,
visibleRange: {start: moment('2000-01-02'), end: moment('2000-01-09')},
editable: true,
selectable: true,
views: {
settimana: {
type: 'agenda',
columnFormat: 'ddd',
hiddenDays: []
}
},
defaultView: 'settimana',
defaultDate: $.fullCalendar.moment().startOf('week'),
slotMinutes: 30,
events: [
$.fn.getAgendaWorktime(1, "08:00:00", 60),
$.fn.getAgendaWorktime(2, "08:30:00", 120),
],
select: function(startDate, endDate) {
$('#calendar').fullCalendar('renderEvent', {
title: 'free time',
start: startDate.format(),
end: endDate.format(),
allDay: false
});
},
eventClick: function(calEvent, jsEvent, view) {
console.log(calEvent, jsEvent, view);
if(doubleClick==calEvent._id){
if (confirm('Delete it?')) {
$('#calendar').fullCalendar('removeEvents',calEvent._id);
}
doubleClick = null;
}else{
doubleClick=calEvent._id;
}
},
});
});
function getEvents() {
var e=0,err=false,$data = []
$('#calendar').fullCalendar('clientEvents').forEach(periodo => {
if (periodo.end==null || periodo.start.format().substr(0,10)!=periodo.end.format().substr(0,10)) {
if (e==0) {
err = true;
e++;
alert('Event startint at '+periodo.start.format()+' cant spread to multiple days');
}
} else {
$data.push({'ini': periodo.start.format(), 'fim': periodo.end.format()});
}
});
alert($data[0].fim);
}
jQuery.fn.getAgendaWorktime = function ($dow, $start, $elapsed) {
var r = {
allDay: false,
title: 'free time',
start: new Date('2000-01-02 '+$start),
end: new Date('2000-01-02 '+$start)
};
r.start.setDate(r.start.getDate()+$dow);
r.end.setDate(r.end.getDate()+$dow);
r.end.setHours(r.end.getHours()+($elapsed*60));
return(r);
}

By default FullCalendar end date null when event end_date = start_date.
I Just pass another fiend with same date from database (Django View).
event_sub_arr['end'] = end_date
event_sub_arr['end_same_date'] = end_date
And check in javaScript
eventClick: function(info) {
var modal = document.getElementById('DeleteEventModal')
getEventDeleteUrl(info.event.id)
getEventUpdateUrl(info.event.id)
modal.style.display = 'block'
calendar.unselect()
var start = info.event.start
var end_same_date = info.event.end_same_date
var end = info.event.end || end_same_date
$("#event_id_name").text(info.event.title)
$("#event_id_start").text(moment(start).format('h:mm:ss a, MMMM Do YYYY'))
$("#event_id_end").text(moment(end).format('h:mm:ss a, MMMM Do YYYY'))
console.log(info.event.start)
console.log(info.event.end)
console.log({{ event_data|safe }})
},
ITS WORK FOR ME

FullCalendar showing Duplicates Events on Month change

I am working on adding events to fullcalendar with Javascript. I am using fullcalendar-2.7.2. The events are added when i click on the custom button but when I change the month it shows many duplicate events.
Here is the code that I have written :-
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
theme: true,
eventClick: function(event) {
// opens events in a popup window
window.open(event.url, 'gcalevent', 'width=700,height=600');
return false;
},
loading: function(bool) {
$('#processingDiv').toggle(bool);
},
selectable: true,
selectHelper: true,
select: function(start, end) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
},
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultDate: moment().utc().valueOf(),
editable: true,
eventLimit: true, // allow "more" link when too many events
fixedWeekCount: false
});
try {
//This data is showing Okay. This one is the Test Event in image Below on Date 1.
var jsonStart = JSON.parse('{!jsonStringSF}');
var myCalendar = $('#calendar');
for(var i=0; i < jsonStart.length; i++) {
var myEvent = {
id: jsonStart[i].id,
title: jsonStart[i].title,
allDay: jsonStart[i].allDay,
start: jsonStart[i].startDate,
end: jsonStart[i].endDate
};
myCalendar.fullCalendar('removeEvents', myEvent.id );
myCalendar.fullCalendar( 'renderEvent', myEvent, true );
}
} catch(err) {
alert(err.message);
}
});
</script>
<body>
<apex:form >
<apex:actionFunction name="getEventsFromGoogle" action="{!getEventsFromCalendar}" onComplete="showEventsOnCalendar('{!jsonString}');" />
<apex:actionFunction name="syncEventsToGoogle" action="{!startSyncToGoogle}" onComplete="hideProcessingDiv();" />
</apex:form>
<div id="processingDiv" style="display:none;">
<apex:outputPanel styleClass="popupBackground" layout="block"/>
<apex:outputPanel styleClass="custPopup" layout="block">
<img src="/img/loading24.gif" style="vertical-align:middle; horizontal-align:middle"/>
<span>Please wait...</span>
</apex:outputPanel>
</div>
<div id="allButtons">
<button class="ui-button ui-state-default" onClick="syncToGoogle();">Sync Salesforce to Google</button>
<button class="ui-button ui-state-default" onclick="connectToGoogle();">Sync Google to Salesforce</button>
</div>
<div id='calendar'></div>
<script>
function syncToGoogle() {
showProcessingDiv();
syncEventsToGoogle();
}
function connectToGoogle() {
showProcessingDiv();
getEventsFromGoogle();
}
function showEventsOnCalendar(jsonString) {
//jsonString is [{"title":"Assign Task","startDate":"2016-05-07T13:00:00+05:30","sequence":1,"recurrence":["RRULE:FREQ=WEEKLY;BYDAY=SU,SA"],"id":"mhpufelkfo1d7thn2naqm2s2ec","endDate":"2016-05-07T14:00:00+05:30","allDay":false}]
try {
var json = JSON.parse(jsonString); //This is String which has list of events.
var myCalendar = $('#calendar');
var myEvent = '';
for(var i=0; i < 1; i++) { //For testing I have itrated the loop just once.
myEvent = '';
var recurValue = JSON.stringify(json[i].recurrence);
//RRULE:FREQ=WEEKLY;UNTIL=20160520T110000Z;BYDAY=MO,TU,WE,TH,FR,SU,SA
//Recurrence returns this format.
if(recurValue != null && recurValue != 'null') {
var Frequency = recurValue.match("FREQ=(.*?);");
var Until = recurValue.match("UNTIL=(.*?);");
var ByDay = recurValue.match("BYDAY=(.*?)\"]");
if(ByDay[1] == null && ByDay[1] == 'null') {
ByDay[1] = '';
}
var repeatDays = [];
if(ByDay[1].indexOf('MO') > -1) {
repeatDays.push(1);
}
if(ByDay[1].indexOf('TU') > -1) {
repeatDays.push(2);
}
if(ByDay[1].indexOf('WE') > -1) {
repeatDays.push(3);
}
if(ByDay[1].indexOf('TH') > -1) {
repeatDays.push(4);
}
if(ByDay[1].indexOf('FR') > -1) {
repeatDays.push(5);
}
if(ByDay[1].indexOf('SA') > -1) {
repeatDays.push(6);
}
if(ByDay[1].indexOf('SU') > -1) {
repeatDays.push(0);
}
myEvent = {
id: json[i].id,
title: json[i].title,
allDay: json[i].allDay,
start: json[i].startDate,
end: json[i].endDate,
dow: repeatDays
};
} else {
myEvent = {
id: json[i].id,
title: json[i].title,
allDay: json[i].allDay,
start: json[i].startDate,
end: json[i].endDate
};
}
$('.fc-event').remove(); //Tried this is solve the problem but failed.
//myCalendar.fullCalendar('removeEvents', myEvent.id ); //also tried this but still no luck.
myCalendar.fullCalendar( 'renderEvent', myEvent, true );
}
hideProcessingDiv();
} catch(err) {
hideProcessingDiv();
alert(err.message);
}
}
This is how it looks at start :-
Here is the screenshot of the problem when click on the next month or come back: -
Can anyone suggest me the solution to stop the duplicates?

Fullcalendar, preventing user from selecting multiple day event

In my fullcalendar http://fullcalendar.io/
I want to prevent a user to be able to create an event on multiple days
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
lang: "fr",
header: false,
timezone: 'local',
minTime: "08:00:00",
columnFormat: 'dddd',
selectHelper: true,
selectable: true,
select: function(start, end, id, allDay) {
var eventData = {
start: start,
end: end,
id: 1,
block: true,
editable: true,
backgroundColor: "#469278"
};
// console.log(moment(eventData.start["_d"]).format("dddd"));
// console.log(moment(eventData.end["_d"]).format("dddd"));
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
// console.log(eventData);
if (moment(eventData.start["_d"]).format("dddd") != moment(eventData.end["_d"]).format("dddd")) {
$('#calendar').fullCalendar('unselect');
};
var day = moment(eventData.start["_d"]).format("dddd");
var start_time = moment(eventData.start["_d"]).format("HH:mm");
var end_time = moment(eventData.end["_d"]).format("HH:mm");
var id = moment(eventData.end["_id"]);
var slot = {
day: day,
start_time: start_time,
end_time: end_time
};
array_dispo.push(slot);
$("#dispo_array").val(JSON.stringify(array_dispo));
$('#calendar').fullCalendar('unselect');
},
});
});
When a user is selecting a start date that is different from the end date of his event I thus tried to use the unselect method from the doc http://fullcalendar.io/docs/selection/unselect_method/ like this :
if (moment(eventData.start["_d"]).format("dddd") != moment(eventData.end["_d"]).format("dddd")) {
$('#calendar').fullCalendar('unselect');
};
But unfortunately this code doesnt automatically deselects the current selection...

You can do a check in your select method and then decide whether you want to render the event or not.
I also use Moment.js to calculate dates and durations, this library is included with FullCalendar (http://fullcalendar.io/docs/utilities/Moment/)
So I played around and came up with this:
select: function (start, end) {
var mEnd = $.fullCalendar.moment(end);
var mStart = $.fullCalendar.moment(start);
if (mEnd.isAfter(mStart, 'day')) {
$('#calendar').fullCalendar('unselect');
} else {
$('#calendar').fullCalendar('renderEvent', {
start: mStart,
end: mEnd,
allDay: false
},
true // stick the event
);
$('#calendar').fullCalendar('unselect');
}
}
Here is the jsfiddle if you want to see it in action: here

You can do it using this way:
eventResize: function(eventResizeInfo) {
console.log('eventResize is called');
var event = eventResizeInfo.event;
if (event.start.getDay() !== event.end.getDay()) {
eventResizeInfo.revert();
}
},

To prevent users from selecting multiple days at a time
selectAllow: function(selectedEvent) {
let startDate = selectedEvent.start;
let endDate = selectedEvent.end;
endDate.setSeconds(endDate.getSeconds() - 1);
if (startDate.getDate() === endDate.getDate()) {
return true;
} else {
return false;
}
}

Simply add the following option to your calendar:
selectAllow: (selectInfo) => { return selectInfo.start.getDay() === selectInfo.end.getDay() },

on refresh full calendar adds duplicate events

On the first load of the page, it shows a single event per day, but on the second load (or refresh of the page) it adds a duplicate event on the same day in the full calendar.
Here is my code:
var CalendarView = Backbone.View.extend({
el : '#calendar-box',
initialize : function() {
// TODO for instance: more instances, Event Bus bindings... only once.
this.calendarModel = new CalendarModel();
$('#calendar-box').hide();
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
this.calendarModel.fetch({
success : function(model, response, options) {
$.unblockUI();
var count=0;
var eventsList=[];
model.attributes.result.forEach(function(){
eventsList.push({
id: model.attributes.result[count].eventId,
title:model.attributes.result[count].title,
start: new Date(model.attributes.result[count].startDate),
end: new Date(model.attributes.result[count].endDate),
attorneyName: model.attributes.result[count].attorneyName,
codeLitOrg: model.attributes.result[count].codeLitOrg,
balance: model.attributes.result[count].balance,
litCode: model.attributes.result[count].litCode
});
count++;
});
if (!_.isEmpty(eventsList)){
$('#calendar').fullCalendar({
editable: true,
events: eventsList,
eventMouseover: function(event, jsEvent, view) {
var info = event.title+'\nBK/LIT: '+event.codeLitOrg+'\nBalance: '+event.balance
+'\nAttorney: '+event.attorneyName+'\nLitCode: '+event.litCode;
$(jsEvent.target).attr('title', info);
},
theme: false,
height:575,
weekMode:'liquid',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
});
}
},
error : function(model, xhr, options) {
$.unblockUI();
}
});
$.eventBus.on('calendarModalLoaded',function(){
if (!($('.fc-border-separate').html())){
$('#calendar').fullCalendar('today');
}
});
},
render : function() {
// TODO for instance, bindings elements after ready in DOM.
$('#calendar').fullCalendar('today');
return this;
},
events : {
'click a.op-attorney-info' : 'onAttorneyInfo',
'click .go-back-link' : 'goBack'
},
goBack: function(){
$('#calendar-box, .content-box').toggle();
//$('.content-box').toggle();
//$('.go-back-link').hide();
},
onAttorneyInfo : function(ev) {
// TODO for instance, fetch attorney's model
}
});
return CalendarView;
});
I have tried $('#calendar').fullCalendar('removeEvents'), but it is also not working.
Please help me out.