An issue i faced while using the select was:
When I click on the date in the month view, the function as specified in the select: function(start, end, allDay) {etc code i want to run here } is immediately fired before changing the view.
I am trying to achieve the following:
1) User clicks on a date on the month view
2) user gets sent to the agendaDay view on the date that he clicked via dayclick() and changeView and gotoDate.
3) User uses select to select time slots.
4) fire up the code i want to run.
Any advice is much sppreciated.
Regards,
Han
version 1.4.7 added support for a "View Option Hash" for the selectable option, so something like this:
$('#calendar').fullCalendar({
selectable: {
month: false,
agenda: true
}
});
Related
What is the way to catch anytime a view is rendered?
Not only when switching views, but also when clicking today / prev / next?
I need to clear an array of unique event titles after (or before) each render is complete.
So, similar to eventAllRender which was removed starting v4.
Currently using .click event for all buttons, which does the trick, but I was hoping there was something really linked to the actual rendering.
calendar.render();
$('.fc-button').click( () => {
console.log("do something")
})
https://fullcalendar.io/docs/datesSet
Called after the calendar’s date range has been initially set or
changed in some way and the DOM has been updated.
datesSet: function(info) {
// ...
}
I am using Asp.net Webforms and FullCalendar library. The client side works as expected. I have added a submit button to the calendar. On submit, i want to get all the changed or added events from the calendar and post them to database. Clientevents gets all events of the calendar, however i want to get only the changes between the calendar and datasource. Can you please help me?
Possible duplicate of How to send only updated events as json to server on fullcalendar?
You can include your own field on event object (like isNew / isUpdated) and filter the events by that field when you collect all events.
eventData = {
title: title,
start: start,
end: end,
isNew: true, //your own field
isUpdated: true, //your own field
};
var eventsFromCalendar = $('#calendar').fullCalendar('clientEvents', function (event) {
return event.isNew == true;
});
I'm building a calendar-based web app with fullcalendar, which is for college students to use. There are some categories I've defined. e.g, sport, art, mind, etc... every event in the fullcalendar would be assigned to a category.
What i want to do is: there're some checkboxes corresponding categories on the top of the calendar, and the user can check or uncheck some checkboxed to hide/show the related events
how would I achieve this?
One way is to put appropriate classes on each event by setting the 'className' property on the event objects you're sending to the calendar and use jquery to hide those events (e.g. $(.myClassName).hide()) when they check the checkboxes. The trouble is the events would vanish leaving a gap where they were which might not be what you want.
A better way would be to add a filter function to the events option when you first call fullCalendar like this:
fullCalendar({
...
events: {
url: ....,
success: function(events) {
$.map(events, function (e) {
if (userHasFilteredOut(e))
return null;
else
return e;
});
},
...
});
This will filter out the events before they are displayed. The function userHasFilteredOut returns true if the event object passed in is of a class the user's checkbox values indicate is filtered out. When the user checks or unchecks a checkbox, you will need to refetch all the events from the server. You need to do this:
$('#mycal').fullCalendar('refetchEvents');
On page I have fullcalendar, variable which determines how to display now (all events or events with filter), button for changing variable value and function which applies filter.
Variable (true - show all events, false - with filter):
var isShownWithCancelEvents = true;
Button and it's click function:
$('.fc-header-left').append('<span class="fc-button fc-button-show-with-canceled-events fc-state-default"><span class="fc-button-inner"><span id="show_without_canceled_events" class="fc-button-content">Show with filter</span><span class="fc-button-effect"><span></span></span></span>');
$(".fc-button-show-with-canceled-events").click(function() {
isShownWithCancelEvents = !isShownWithCancelEvents;
prepareEvents();
});
Function prepareEvents():
function prepareEvents(){
if (isShownWithCancelEvents) {
$('#calendar').fullCalendar('refetchEvents');
$(".fc-button-show-with-canceled-events .fc-button-content ").text("Show with filter");
}
else {
$('#calendar').fullCalendar ( 'removeEvents', filter );
$(".fc-button-show-with-canceled-events .fc-button-content ").text("Show all events");
}
}
Filter function:
function filter(event) {
return (event.ec_e_id !== null);
}
Also in fullcalendar I use option:
viewDisplay: function(view) {
prepareEvents();
},
Button is working, problem is with fullcalendar option.
Default view on page is agendaWeek. I open page and click button, variable's value changes to false, filter applies. It's OK. Then I click button "Month" and view changes to month. And I see all events. Then I click button "Week" and view changes to agendaWeek - events are filtered. I click button "Month" again - on this view events are filtered too. So, the problem is when first time changing view to another.
I open page and click button, variable's value changes to false, filter applies. It's OK. Then I navigate left or right (next or previous week), and I see all events. Then I return back, where events were filtered and see all events there.
If I add alert into fullcalendar option
viewDisplay: function(view) {
alert("something");
prepareEvents();
},
everything is OK, and filter works every time.
I am using fullcalendar and I am not using event source, I render all the events by using renderEvent method like following:
$('#calendar').fullCalendar('renderEvent', {
id: obj.Id,
title: obj.Title,
start: obj.Start,
end: obj.End,
text: obj.Text,
className: "custom" + colorIndex,
allDay: obj.AllDay,
userId: obj.userId
});
But the problem is, like I rendered 5 events in Mar.2011, they are all displayed OK. And then I navigate to Feb.2011 and back, all the 5 events are disappeared.
Does it mean that if I render the events like this, I have to render the events everytime the view is changed?
Best Regards.
Larry.
you gotta use the stick parameter of the renderEvent function
http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/
I tried last night.
If I use event source then the problem is solved.
It seems that if I render the event one by one. They are not kept through view changing.