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);
});
Related
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 can I change the color of the specific day which has been clicked on my calendar?
This is my code:
selectable: true,
selectHelper: true,
select: function(calEvent, jsEvent, view) {
var moment = $('#calendar').fullCalendar('getDate');
/**
* calEvent is the event object, so you can access it's properties
*/
if(confirm("Would you like to cancel the meal delivery ?")){
delete event in backend
jQuery.post("/vacation/deleteEvent", { "id": calEvent.id } );
delete in frontend
$(this).css('border-color', 'red');
}
},
For the JQuery plugin fullcalendar which I suppose you are using, you can change the color of specific day by his title like this :
eventRender: function(event, element) {
$where = event.title;
if ($where == 'your title')
element.css('background-color', '#bbd2e1');
else
element.css('background-color', '#f0c0cb');
}
I am showing the month view in the Full Calendar. When i click a day in the month view it should display the Day/Agenda View for that particular day.
Below is the code - But it shows the present days agenda view instead the one clicked.
dayClick: function(date, allDay, jsEvent, view) {
if (allDay) {
// Clicked on the entire day
$('#calendar')
.fullCalendar('changeView', 'agendaDay'/* or 'basicDay' */)
.fullCalendar('gotoDate', date.getFullYear(), date.getMonth(), date.getDate());
}
},
here is how i do that exact thing:
dayClick: function(date, jsEvent, view) {
if(view.name == 'month' || view.name == 'basicWeek') {
$('#calendar').fullCalendar('changeView', 'basicDay');
$('#calendar').fullCalendar('gotoDate', date);
}
}
code edit
For the version 4 is like this:
dateClick: function(info) {
if(info.view.type=="dayGridMonth"){
this.changeView("timeGridDay",info.dateStr);
}
}
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"}]
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,