I want to disable the allDay option just in the agenda view. I want it to be visible for the week and month view.
Right now I have this:
var calendar = $('#calendar').fullCalendar({
slotMinutes: 15,
defaultView: 'agendaWeek',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true
});
and another 200 lines of js but here is my initialization of the calendar object.
Can I do something like the following code for the viewObject constructor?
view: {
view:'agendaDay',
allDaySlot:false,
allDayText:false
},
How can I do this?
You are actually looking for Options Setters for fullCalendar. So you can do something like this:
viewDisplay: function(view) {
if( view.name == 'agendaDay' ){
$('#calendar').fullCalendar('allDaySlot',false); // Not supported yet
}
}
I've been dreaming about this as well, but unfortunately FullCalendar doesn't allow to set options on fly yet. But the following two links can be useful for you:
http://code.google.com/p/fullcalendar/issues/detail?id=293
https://github.com/arshaw/fullcalendar/pull/25
Related
I have a Ruby on Rails project that i'm currently working on that will schedule assigned work tickets for Technicians based on their availability and daily schedule using Full Calendar. I currently have several technicians schedules (start/stop times) saved in my Postgres database ready to be pulled and hopefully displayed into FullCalendar. The plan is for the Calendar to render the imported schedule and for the available times that a technician is working will be where I would like an event to only be placed and for the other areas in which they're not available to work I would like them to be greyed/darkened out.
So Far I have setup in an initial basic calendar and have been playing around with the eventConstraint option but that does not give the user any visual feedback on where events are allowed to be placed. This is what my current set up and technician schedules table looks like.
create_table "technician_schedules", force: :cascade do |t|
t.datetime "start_time"
t.datetime "end_time"
t.string "work_type"
t.integer "technician_id"
t.datetime "created_at", null: false
t.datetime "updated_at", null: false
end
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid', 'timeGrid', 'list', 'interaction', 'bootstrap' ],
themeSystem: 'bootstrap',
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
defaultView: 'timeGridWeek',
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
businessHours: true,
eventConstraint: {
startTime: '2019-09-04T10:00:00',
endTime: '2019-09-05T20:00:00'
},
events: [
{
id: 999,
title: 'event',
start: new Date(2019, 9, 1)
},
],
windowResize: function(view) {
var current_view = view['name'];
var expected_view = $(window).width() > 576 ? 'timeGridWeek' : 'timeGridDay';
if (current_view !== expected_view) {
calendar.changeView(expected_view);
}
}
});
calendar.render();
});
I am still very new to FullCalendar and learning and I am not sure if eventConstraint would be the best option, nor am I familiar with how best to render pre planned schedules from my database. How do I best display a an imported work schedule with unavailable technician times greyed/darkened out with the other times being available for event assignment? Any help would be greatly appreciated. Thanks
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
My goal is to have 2 different FullCalendar elements that stay in sync. I'm not doing ANY network calls, simply client side arrays at this point.
When I add an event (say through a click or just right after it's built) the calendar does not actually re-render as the documentation claims.
I've also attempted to use the "renderEvents" and "renderEvent" flavors but that seems unnecessary since "updateEvents" would/should update the rendering of these events. The problem I also ran into is the "renderEvent" on the list version of the calendar does not show the event I'm adding if it's out of the range of that calendar.
const events = [{
title: 'All Day Event',
start: TODAY
},
{
title: 'Long Event',
start: TODAY,
end: NEXTDAY
}
]
$("#calendar").fullCalendar({
header: {
left: '',
center: 'title',
right: ''
},
events
})
$("#events").fullCalendar({
header: {
left: '',
center: 'title',
right: ''
},
defaultView: 'listMonth',
events
})
// Now add a new one
events.push([{
title: 'Event added',
start: YESTERDAY
}])
$('#calendar').fullCalendar('updateEvents', events)
$('#events').fullCalendar('updateEvents', events)
Here's a recreation of the issue:
https://jsfiddle.net/Kikketer/7d92utp5/
The use case is pretty simple: Add a new event to the list of events, render the events on the calendar.
firstly change your pushing event to object from array.
events.push({
title: 'Event added',
start: YESTERDAY
});
Now, you have many choice to do that. I will write 2 way for you.
a.
$('#calendar').fullCalendar( 'removeEvents');
$('#calendar').fullCalendar('addEventSource', events);
https://jsfiddle.net/7d92utp5/49/
b. 1) Change events param to function
$("#calendar").fullCalendar({
header: {
left: '',
center: 'title',
right: ''
},
// at here
events: function (start, end, timezone, callback) {
callback(events);
}
});
2) Use refetchEvents instead updateEvents
$('#calendar').fullCalendar('refetchEvents');
https://jsfiddle.net/7d92utp5/53/
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.
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"
},
//...