I am using fullCalendar package to add calendar in my project. By default the view shows by months and I want to change it to weekly bases.
From fullCalendar documentation, agendaWeekis what I am looking for.
I tried the following (didn't work):
$("#calendar").fullCalendar({
defaultView: 'agendaWeek'
});
When I create button and add the following event to it:
Template.appointments.events({
'click #check': function(e, t) {
e.preventDefault()
// console.log(Requests.find({}).fetch())
$('#calendar').fullCalendar('changeView', 'agendaWeek');
}
});
It works and the calendar changes.
My question is, how can set the calendar view to agendaWeek by default?
It would even be better if there is a way to make it similar to the calendar in their official page were there are three buttons (month, week, and day) buttons to choose from.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay', // gets you the three button tabs that you were looking for, similar to the demo
},
defaultView: 'agendaWeek' // default view is agendaWeek
});
Here is the jsfiddle for it.
Related
I've been playing with official Fullcalendar CodePen
and can't find a way to make event non-editable (or editable).
In demo, the global option is set: editable: true. If I try to change this setting per event with:
eventRender: function(event, element){
event.editable=false;
}
nothing changes. Events are still all editable (resizable, draggable,..) . I found this post jquery-fullcalendar-change-editable-properties-of-particular-event-on-a-calendar
where the suggestion is:
editable: false,
eventRender: function(event, element) {
if(event.userId === user.id) {
event.editable = true;
}
}
but this doesn't work. Changing event.editable under eventRender or eventAfterRender, does not take any effect.
Is it possible to change this setting dynamically (per event)?
You can use an eventDataTransform function to check if your event has the desired user Id and then change the editable property to true.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: 'https://fullcalendar.io/demo-events.json?overload-day',
eventDataTransform: function(event){
if(event.userId === user.id){
event.editable=true;
}
return event;
}
});
});
Edit: I think the eventRender function is meant to be used to modify the element. To modify the event you should use the eventDataTransform function
I have this agenda view and I want to hide the hours line. What's the solution ? Thanks.
You can use basicWeek instead of agendaWeek view available views
check this: http://jsfiddle.net/e78b944d/1/
$('#calendar').fullCalendar({
defaultView: 'basicWeek' /* 'agendaWeek' */
});
I want to show event start time and and end time with title for the all day events in month view.
is there any method or property available in fullcalendar.io which can help me to achieve.
To do this, use the eventRender callback (see its description in docs).
function( event, element, view ) { ... }
You have 2 options to do what you need:
Modify the element that is being passed to the eventRender callback by changing its HTML.
From the docs:
element is a newly created jQuery element that will be used for rendering. It has already been populated with the correct time/title text.
Or, you can construct a custom element that fits your requirements and return it from the callback. Make sure to to return a <td> element for your all-day events:
The function can also return a brand new element that will be used for rendering instead. For all-day background events, you must be sure to return a <td>.
You may use eventRender as below
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: new Date(),
defaultView: 'month',
editable: true,
events: events,
eventRender: function (calEvent, element, view) {
//In my case I've created properties startTimeShort and endTimeShort
element.html("<span>" + calEvent.startTimeShort + "-" + calEvent.endTimeShort + "</span>");
}
});
I think by clicking on the button to display the calendar view eventLimit with different parameters, because there are a number of events on the page is a user added or modified, but not saved to the server. Users need to switch to a different view of events limit, which is in this jsfiddle
To change options when the calendar is already rendered you need to destroy the calendar first, change the option, then build the calendar again.
You can do it like this:
var options = $('.calendar').fullCalendar('getView').options;
options.eventLimit = false;
$('.calendar').fullCalendar('destroy');
$('.calendar').fullCalendar(options);
jsfiddle
The ability to change options dynamically now exists.
You don't have to destroy the calendar.
The syntax is calendar.setOption('eventLimit',false) to set the limit and calendar.getOption('eventLimit') to see what it is.
I wanted to have a button to expand/collapse all events on button click so I made a custom button like this:
calendar = new FullCalendar.Calendar($("#calendar"), {
plugins: [ 'dayGrid', 'interaction', 'timeGrid', 'list' ],
height: 700,
displayEventEnd: true,
customButtons: {
eventLimitButton: {
text: 'Expand/Collapse All',
click: function() {
if(!calendar.getOption('eventLimit'))
calendar.setOption('eventLimit',5); //I set the limit to 5
else
calendar.setOption('eventLimit',false);
}
}
},
header: {
left: 'prev,next today eventLimitButton',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
buttonText: {
today: "Today",
dayGridMonth: "Month",
timeGridWeek: "Week",
timeGridDay: "Day",
listWeek: "Weekly List"
},
//...
I have setup a google calendar using the gcal.js from fullcalendar which displays a month view easilty enough.
What I really want to do is display this calendar in a single day or agenda view instead of the default month view but I cannot for the life of me find any reference to whether this is possible.
You need to use the defaultView option and set the value to 'basicDay' or 'agendaDay' as listed in Available Views.
Code should look like:
$('#calendar').fullCalendar({
header: {
left: 'prev, next today',
center: 'title',
right: 'month, basicWeek, basicDay'
},
defaultView: 'basicDay'
});