I am using full calendar js in my code. I am able to select multiple dates in the calendar but I am not able to unselect the selected dates. Where do I need to changes in my code?
IN HTML FILE
<div class ="main-container fullcalendar-booking-course unselectCancel">
<div id="calendar"></div>
</div>
IN MY JS FILE
<script type="text/javascript">
$(document).ready(function() {
getFullCalendar();
</script>
<script type="text/javascript">
function getFullCalendar(){
$('#calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'month,agendaWeek'
},
views: {
month: {
titleFormat: 'YYYY, MM, DD'
}
},
validRange: function(nowDate) {
return {
start: nowDate,
end: nowDate.clone().add(1, 'months')
};
},
navLinks: true,
selectable: true,
selectHelper: true,
select: function(start, end) {
startDate = moment(new Date(start)).format("MM-DD-YYYY");
endDate = moment(new Date(end)).format("MM-DD-YYYY");
$("#calendar").fullCalendar('addEventSource', [{
start: start,
end: end,
rendering: 'background',
block: true,
}]);
$("#calendar").fullCalendar("unselect");
},
selectOverlap: function(event) {
return ! event.block;
},
editable: true,
eventLimit: true,
events: function(start, end, timezone, callback){
},
eventClick: function(event, jsEvent, view) {
},
loading: function(bool) {
$('#loading').toggle(bool);
},
eventRender: function(event, element){
},
eventAfterAllRender: function (view) {
var quantity = $('.fc-bgevent').length;
$("#quantity").val(quantity);
},
});
}
</script>
NOTE:
I am using fullcalendar js file and CSS file. I have initialized the function in the document ready function. I need to unselect the selected dates. I can select multiple dates but unable to unselect the dates.
I like the fullcalendar JQuery-Plugin. My calendar doesn't work. At the moment i am looking for a solution to add an event but i can't... Why ?
This is my code:
$(document).ready(function() {
$('#calendar').fullCalendar({
defaultDate: '2017-05-11',
editable: true,
selectable: true,
selectHelper: true,
eventLimit: true, // allow "more" link when too many events
select: function(start, end, allDay) {
var title = prompt("Event here: ", "New Event:");
if (title != null) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
$calendar.fullCalendar("unselect");
},
events: [
{
title: 'All Day Event',
start: '2017-05-01'
}
]
});
});
You need to define variable calendar like below
var calendar = $('#calendar').fullCalendar({
Then it will work.
I went through a couple of similar questions on stackoverflow. But, I couldn't get much help from them. Here is my problem :
I need to have multiple calendar on single page. But, currently only the first rendered calendar works properly. For example, if I have three calendars with different ids :
#calendarug1, #calendarug2, #calendarug3
Assume that order of declaring them in html page is
#calendarug3
#calendarug2
#calendarug1
Then only on #calendarug3 events like drag, drop and select work properly. On other calendars I am unable to create new events or drop new events.
Here is my code
HTML
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 calendarbox">
<div class="row well calendar">
<h3 >UG3 Timetable</h3>
<div id='calendarug3'>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 calendarbox">
<div class="row well calendar">
<h3 >UG2 Timetable</h3>
<div id='calendarug2'>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 calendarbox">
<div class="row well calendar">
<h3 >UG1 Timetable</h3>
<div id='calendarug1'>
</div>
</div>
</div>
</div>
</div>
JS
$('#calendarug3').fullCalendar({
// put your options and callbacks here
header: { // Display nothing at the top
left: '',
center: '',
right: ''
},
theme: true,
//aspectRatio: 2.44,
//eventSources: ['events.php'],
height: 520, // Fix height
columnFormat: 'dddd', // Display just full length of weekday, without dates
defaultView: 'agendaWeek', // display week view
hiddenDays: [0,], // hide Saturday and Sunday
weekNumbers: false, // don't show week numbers
minTime: '8:30:00', // display from 16 to
maxTime: '19:00:00', // 23
slotDuration: '00:30:00', // 15 minutes for each row
allDaySlot: false, // don't show "all day" at the top
selectable: true,
editable: true,
defaultDate: '2016-10-10',
droppable: true, // this allows things to be dropped onto the calendar
selectHelper: true,
select: function(start, end, jsEvent) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendarug3').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendarug3').fullCalendar('unselect');
},
//select: function(start, end, allDay) {
// Code for creating new events.
// alert("Create new event at " + start);
//},
eventResize: function( event, delta, revertFunc, jsEvent, ui, view ) {
// Code when you resize an event (for example make it two hours longer
alert("I just got resized!");
},
eventDrop: function( event, jsEvent, ui, view ) {
// Code when you drop an element somewhere else
alert("I'm somewhere else now");
},
drop: function() {
// is the "remove after drop" checkbox checked?
console.log('calendar 3 viewRender');
if ($('#drop-remove3').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
//defaultView : 'agendaSixDay'
});
////////////////////////////////////////////////////////////////
$('#calendarug2').fullCalendar({
// put your options and callbacks here
header: { // Display nothing at the top
left: '',
center: '',
right: ''
},
theme: true,
//aspectRatio: 2.44,
//eventSources: ['events.php'],
height: 520, // Fix height
columnFormat: 'dddd', // Display just full length of weekday, without dates
defaultView: 'agendaWeek', // display week view
hiddenDays: [0,], // hide Saturday and Sunday
weekNumbers: false, // don't show week numbers
minTime: '8:30:00', // display from 16 to
maxTime: '19:00:00', // 23
slotDuration: '00:30:00', // 15 minutes for each row
allDaySlot: false, // don't show "all day" at the top
selectable: true,
editable: true,
defaultDate: '2016-10-10',
droppable: true, // this allows things to be dropped onto the calendar
selectHelper: true,
select: function(start, end, jsEvent) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendarug2').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendarug2').fullCalendar('unselect');
},
//select: function(start, end, allDay) {
// Code for creating new events.
// alert("Create new event at " + start);
//},
eventResize: function( event, delta, revertFunc, jsEvent, ui, view ) {
// Code when you resize an event (for example make it two hours longer
alert("I just got resized!");
},
eventDrop: function( event, jsEvent, ui, view ) {
// Code when you drop an element somewhere else
alert("I'm somewhere else now");
},
drop: function() {
// is the "remove after drop" checkbox checked?
console.log('calendar 2 viewRender');
if ($('#drop-remove2').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
//defaultView : 'agendaSixDay'
});
$('#calendarug1').fullCalendar({
// put your options and callbacks here
header: { // Display nothing at the top
left: '',
center: '',
right: ''
},
theme: true,
//aspectRatio: 2.44,
//eventSources: ['events.php'],
height: 520, // Fix height
columnFormat: 'dddd', // Display just full length of weekday, without dates
defaultView: 'agendaWeek', // display week view
hiddenDays: [0,], // hide Saturday and Sunday
weekNumbers: false, // don't show week numbers
minTime: '8:30:00', // display from 16 to
maxTime: '19:00:00', // 23
slotDuration: '00:30:00', // 15 minutes for each row
allDaySlot: false, // don't show "all day" at the top
selectable: true,
editable: true,
defaultDate: '2016-10-10',
droppable: true, // this allows things to be dropped onto the calendar
selectHelper: true,
select: function(start, end, jsEvent) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendarug1').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendarug1').fullCalendar('unselect');
},
//select: function(start, end, allDay) {
// Code for creating new events.
// alert("Create new event at " + start);
//},
eventResize: function( event, delta, revertFunc, jsEvent, ui, view ) {
// Code when you resize an event (for example make it two hours longer
alert("I just got resized!");
},
eventDrop: function( event, jsEvent, ui, view ) {
// Code when you drop an element somewhere else
alert("I'm somewhere else now");
},
drop: function() {
// is the "remove after drop" checkbox checked?
console.log('calendar 1 viewRender');
if ($('#drop-remove1').is(':checked')) {
// if so, remove the element from the "Draggable Events" list`enter code here`
$(this).remove();
}
}
//defaultView : 'agendaSixDay'
});
///////////////////////////////////////////////////////////////////////
I don't know how to add events in fullcalendar scheduler.js, can anyone help me?
I can add events with fullcalendar but without scheduler.js that works.
When I add this code to my script the event won't add
select: function(start, end)
{
this.title = prompt('Event Title:');
this.eventData;
if (this.title) {
this.eventData = {
title: this.title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', this.eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
},
You need to load resource and specify your resource ID in your event as well. So if you put these it will work out. Try this code.
select: function(start, end)
{
this.title = prompt('Event Title:');
this.eventData;
if (this.title) {
this.eventData = {
title: this.title,
start: start,
end: end,
resourceId:['ResourceID1'] // Example of resource ID
};
$('#calendar').fullCalendar('getResources')// This loads the resources your events are associated with(you have toload your resources as well )
$('#calendar').fullCalendar('renderEvent', this.eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
},
Resource example is as follows:
$('#calendar').fullCalendar({
header: {left: 'prev,next today', center: 'title', right: ''},
selectable: true,
allDayDefault: false,
unselectAuto: false,
editable: false,
slotLabelFormat:"HH:mm",
resources: [[id:'ResourceID1', title:"Just a title"],[id:'ResourceID2', title:"Just a title part II"]]
})
I want to make two selections in the calendar. Right now I can only make one that goes to one of my inputs.
I am trying to select a date on the calendar, then that first selection goes to my first input tag.
Then after that I want to select a different date that goes to my second input tag.
So basically, I want to make two selections. Here is my code. Do I need to make a callback somewhere here? I put my code on jsfiddle.
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month'
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = 'true';
if (title === 'true') {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
var eventStart = $.fullCalendar.formatDate(start, "MM/dd/yyyy");
var eventEnd = $.fullCalendar.formatDate(end, "MM/dd/yyyy");
$('input[name="startDate"]').val(eventStart);
}
calendar.fullCalendar('unselect');
},
eventClick: function(calEvent, jsEvent, view) {
$('#calendar').fullCalendar('removeEvents', calEvent._id);
$('input[name="startDate"]').removeAttr('value');
$('input[name="endDate"]').removeAttr('value');
},
editable: true
});
Unless I'm not understanding your question, how about doing this?
if($('input[name="startDate"]').val()=='') {
$('input[name="startDate"]').val(eventStart);
} else {
$('input[name="endDate"]').val(eventEnd);
}
JSFIDDLE