We Keep Coding

Creating Multiple Day Event in Fullcalendar

I am trying to create a calendar application by using fullcalendar. But I have a specific problem.
I want to create an event that last -for example- for 5 days. When I click and drag the newly-created-event, fullcalendar present me something like that:
Mouse click started at 08th Oct 08:00 and mouse click ended at 12th Oct 12:00. The event included all hours between 08th Oct 08:00 and 12th Oct 12:00. This means I have to participate an event that last for 96 hours. You can't expect me to participate a meeting for five-days-long, right?
So, what I actually want is the event should start at 08:00 and end at 12:00 for all five days. Which means the event should be appear like this:
I did it by creating all events one by one. But in my application, I disabled adding two or more events at once for various reasons. Also, I want my customers to be able to create an event like that at once.
Is there any way to do this in fullcalendar?
Here is my code:
function initCalendar {
if (!jQuery().fullCalendar) {
return;
}
var date = new Date(),
started,
ended
var header = {};
var calendar = $('#calendar').fullCalendar({
allDaySlot: false,
eventOverlap: false,
selectOvetlap: false,
header: header,
selectable: true,
selectHelper: true,
defaultView: 'agendaWeek',
select: function (start, end, allDay) {
$('#fc_create').click();
var dateStart = start;
var dateEnd = end;
$(".antosubmit").on("click", function() {
var title = $("#reservation-title").val();
if (title) {
var event = {
//minTime: "08:00:00"
//maxTime: "21:00:00"
editable: true,
title: title,
start: dateStart,
end: dateEnd,
allDay: false
}
calendar.fullCalendar('renderEvent', event, true);
calendar.fullCalendar('unselect');
#('.antoclose').click();
return false;
}
else {
////alert here
}
})
},
eventClick: function (calEvent, jsEvent, view)
{
var selectedEditable = calEvent.editable;
if (selectedEditable) {
$('fc_create').click();
$("#reservation-title").val(calEvent.title);
$(.antoUpdate).on("click", function() {
var title = $("#reservation-title").val();
if (title) {
calEvent.title = $("#reservation-title").val();
#('.antoclose').click();
}
else {
////alert here
}
});
}
else
{
$('fc_edit').click();
$("#title2").val(calEvent.title);
}
calendar.fullCalendar('unselect');
},
events: [{
////add events here...
}]
})
}

How do I highlight a specific day on the calendar retrieved from the URL?

I am using FullCalendar to allow the user to select a specific date, retrieve data from a database, then reload the page with that data. The page is being rewritten with the selected date in the URL.
On reload, I get the date and load the calendar using the defaultDate param and it moves to the selected date, but there is no visual highlighting of the selected day.
$(document).ready(function() {
var newDate = getUrlVars()["scheduled_date"];
// console.log(newDate);
$('#scheduled_calendar').fullCalendar({
<!--Header Section Including Previous,Next and Today-->
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
<!--Default Date-->
// defaultDate: '2015-02-12',
defaultDate: newDate,
editable: true,
eventLimit: true, // allow "more" link when too many events
dayClick: function (date, jsEvent, view) {
// console.log(date.format());
var currentUrl = window.location.href;
$(".fc-state-highlight").removeClass("fc-state-highlight");
$(this).addClass("fc-state-highlight");
newURL = addURLParam(currentUrl,"scheduled_date", date.format())
location.href = newURL;
}
});
if (newDate > "0000-00-00") {
$('#scheduled_calendar').fullCalendar('gotoDate', newDate);
}
});

Found something that works. Edited the final if statement.
if (newDate > "0000-00-00") {
$('#scheduled_calendar').fullCalendar('gotoDate', newDate);
$('.fc-day[data-date="' + newDate + '"]').css('background-color', "lightcyan");
}
Can't find the .fc-day object in the documentation though.

Add Italian holidays into fullcalendar

I use FullCalendar in my application and its working.
Now I need to change the color of Italian holidays into red. I did it for weekends but:
I don't know how to add holidays in calendar.
How can i change their color.
This is my code :
<script>
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev',
center: 'title',
right: 'next',
},
defaultView: 'month',
lang: 'it',
height: 600,
dayClick: function(date, jsEvent, view) {
// Changing BG color
$(this).css('background-color', 'green');
//Create modal here
$('#myModal').modal();
// Show Date in SPAN
$('#spnDate').html(date.format('DD/MM/YYYY'));
// Put Date value in a variable
$('#date').attr('value', date.format('DD/MM/YYYY'));
},
editable: true,
});
</script>

You should use another eventSource that provides the holidays. These events can have a property like holiday, that specify that the event is indeed a holiday.
Based on this holiday, you can change the background color of the day with eventRender
You will have to add the following code to var calendar = $('#calendar').fullCalendar({:
eventSources: [
{
url: 'fullcalendar/holidays' // url to get holiday events
}
// any other sources...
],
eventRender: function(event, element, view) {
// lets test if the event has a property called holiday.
// If so and it matches '1', change the background of the correct day
if (event.holiday == '1') {
var dateString = event.start.format("YYYY-MM-DD");
$(view.el[0]).find('.fc-day[data-date=' + dateString + ']')
.css('background-color', '#FAA732');
}
},
Your JSON object should look like this:
[{"title":"Christmas","start":"2014-12-25","holiday":"1"},{"title":"Another holiday","start":"2014-10-14","holiday":"1"}]

Fullcalendar, want to show all events on dayclick its not showing up

I am using fullcalendar, once a user clicks on a date the events on that day should show up on the pop up.
Currently I have the list of the events with me , I am able to show the events on that day on calendar and make it clickable.
But now I want those events to show on dayclick which I am not able to do.
Below code shows the events on that day on calendar:
eventClick: function(event) {
$.colorbox({html:"<h1>"+event.title+"</h1><br><p>Tour
starts on :"+$.fullCalendar.formatDate(event.start,
'yyyy-M-dd')+"<br>Tour type :
<a href='http://reservations.valantech.com/order-
tour/"+$.fullCalendar.formatDate(event.start,'yyyy-M-
dd')+"/"+event.ID+"'>"+event.type+"</a></p>"});
},
Below code open a pop up when a date is clicked:
dayClick: function(date, allDay, jsEvent, view) {
if (allDay) {
alert('Clicked on the entire day: ' + date);
}else{
alert('Clicked on the slot: ' + date);
}
alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
alert('Current view: ' + view.name);
// change the day's background color just for fun
//$(this).css('background-color', 'red');
},
Now I want to merge these two basically.
Clicking the date should open a pop-up with a list of all available events for that date.
I tried to do :
dayClick: function(date, allDay, jsEvent, view) {
$('#calendar').fullCalendar('clientEvents', function(event) {
if(event.start <= date && event.end >= date) {
return true;
}
return false;
});
but it didnt worked for me.

Try this
dayClick: function(date, allDay, jsEvent, view) {
$('#calendar').fullCalendar( 'changeView', 'basicDay');
$('#calendar').fullCalendar( 'gotoDate', date );
};

It should be like this.
You can change criteria of return value if return true will return actual event and added to your array Array.
and finally you will got array Array variable with all events of that date.
Please check the condition as per your requirements.
dayClick: function(date, allDay, jsEvent, view) {
console.log(date);
$('#agenda_calendar').fullCalendar( 'changeView', 'month');
//$('#agenda_calendar').fullCalendar( 'gotoDate', date );
var array = $('#agenda_calendar').fullCalendar('clientEvents', function(event){
return ( event.start >= date && event.end < date ); // May be change
});
console.log(array);
});

Jquery FullCalendar Extend Start Date or End Date

I am using Jquery FullCalendar.
Here is the link of calender I am using : http://arshaw.com/fullcalendar/
I have a case where I have startdate and enddate.
Now if I extend startdate or enddate by dragging it.
How can I get the response event that was triggered when I dragged/extend the date?
For Example:
When I move the event from one date to another I use eventDrop. It gives me the days added or subtracted to the original dates.
I need the same solution for extending startdate or enddate.
Possibilities I am facing:
Original Dates : 2013-12-04 to 2013-12-07
When Extends : 2013-12-04 to 2013-12-10
OR
When Extends : 2013-12-01 to 2013-12-07
Here are the cases I am facing. How can I track that what event I performed in Calender and what parameters it pass ?

You can use eventResize
below is the example from offical site:
http://arshaw.com/fullcalendar/docs/event_ui/eventResize/
$('#calendar').fullCalendar({
events: [
// events here
],
editable: true,
eventResize: function(event,dayDelta,minuteDelta,revertFunc) {
alert(
"The end date of " + event.title + "has been moved " +
dayDelta + " days and " +
minuteDelta + " minutes."
);
if (!confirm("is this okay?")) {
revertFunc();
}
}
});

Jquery Fullcalender is providing alot of options where you play around wth your events , as per you requirement
Original Dates : 2013-12-04 to 2013-12-07
When Extends : 2013-12-04 to 2013-12-10
This is when you extend the event duration, to catch the event where you change the end date you can use the below code
eventResizeStart: function (event, jsEvent, ui, view) {
console.log('RESIZE START ' + event.title);
},
eventResizeStop: function (event, jsEvent, ui, view) {
console.log('RESIZE STOP ' + event.title);
},
eventResize: function (event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view) {
console.log('RESIZE!! ' + event.title);
console.log(dayDelta + ' days'); //this will give the number of days you extended the event
console.log(minuteDelta + ' minutes');
},
Original Dates : 2013-12-04 to 2013-12-07
When Extends : 2013-12-01 to 2013-12-07
This is when you pre-pone the event , then you can use the below code
eventDragStart: function (event, jsEvent, ui, view) {
console.log('DRAG START ' + event.title);
console.log(this);
},
eventDragStop: function (event, jsEvent, ui, view) {
console.log('DRAG STOP ' + event.title);
console.log(this);
},
eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {
console.log('DROP ' + event.title);
console.log(dayDelta + ' days'); //this will give the number of days you dragged before or after
console.log(minuteDelta + ' minutes');
console.log('allday: ' + allDay);
},
As per you comment above that if you want to restrict the user from dragging a event or resizing a event , then you can use eventDurationEditable , this is true by default
eventDurationEditable:false,