I want to find a way to remove some days from the timeline view of full calendar because they are company holidays. like removing the 4th of July, memorial day etc. how do I do this?
It's not possible to entirely remove them from the display via the API unfortunately, but you can easily mark them as unavailable or whatever - perhaps by using a feed of Background Events, with one event for each holiday. You can maybe generate them from your server, or there are public calendars online containing the official holidays of different countries, which you might be able to use as the source.
A background event is the same as a regular event, except its display mode is changed - for example:
{
start: '2022-06-01T10:00:00',
end: '2022-06-01T16:00:00',
display: 'background'
}
If you additionally want to stop people creating events on those dates, or dragging events onto those dates, that can be controlled through the appropriate options / callbacks - there are examples in the fullCalendar documentation, such as this one which will prevent a user creating a new event on top of a background event:
selectOverlap: function(event) {
return event.rendering === 'background';
}
References:
https://fullcalendar.io/docs/background-events
https://fullcalendar.io/docs/selectOverlap
https://fullcalendar.io/docs/eventOverlap
Related
I want my all day events in google calendar to be set as busy by default. How does one do that? Currently, when I have an "all day event" I am shown as available and I have to change it manually. How do I make it busy by default?
I am shown busy by default only when there is specific time set up. This looks all sorts of backwards to me!
You can achieve the functionality you are describing by using Apps Script.
You can make use of the Calendar Service to create a script and set the transparency property for the events from today to "opaque".
According to the documentation:
transparency - Whether the event blocks time on the calendar. Optional. Possible values are:
"opaque" - Default value. The event does block time on the calendar. This is equivalent to setting Show me as to Busy in the Calendar UI.
"transparent" - The event does not block time on the calendar. This is equivalent to setting Show me as to Available in the Calendar UI.
And in order to call this script, you can create a time-driven trigger which will run every day, something similar to this:
function createTrigger() {
ScriptApp.newTrigger("busyEvents")
.timeBased()
.atHour(12)
.everyDays(1)
.create();
}
Calendar API Events:update;
Apps Script Installable Triggers.
Is there a way to show certain events in my calendar as full background blocks of color? For example, if an event is an all-day event, it's date square will have a background color of red. All other events will look like normal events.
(Im using FullCalendar synched to a google calendar)
To make an event appear as a full block of colour within its slot the way you described, you can use the "background" events feature. Since you're using Google Calendar and don't have full control over the JSON data provided, you'll have to add the necessary property via the eventDataTransform callback, which allows modification of the event data after it's been downloaded but before it's rendered onto the calendar. Something like this I think (as an option in your calendar config):
eventDataTransform: function(event)
{
if (event.allDay == true) event.rendering = "background";
return event;
}
See https://fullcalendar.io/docs/eventDataTransform and https://fullcalendar.io/docs/background-events for details.
use rendering: 'background' in events
I'm using an older version of fullCalendar (1.6.4) with mostly success. I've got a UI that has the ability to add new events to the calendar, and then edit them inline. I'm running into problems when I try to then update the calendar with the modified event object. I'm only running into this problem however with dynamically added events, I can apparently reload the page and update events that fullCalendar adds initially just fine.
The problem seems very related to how the event.source property works. When the property is null on the event, fullCalendar pushes a new instance of the event onto the "cache" object, even if the event otherwise exists on the calendar already. I'm not sure why or how this works. For whatever reason though, I then end up with duplicate instances of the event on the calendar day.
// code directly from fullCalendar 1.6.4
function renderEvent(event, stick) {
console.log('renderEvent',event)
normalizeEvent(event);
if (!event.source) {
if (stick) {
stickySource.events.push(event);
event.source = stickySource;
}
cache.push(event);
}
reportEvents(cache);
}
So, in cases that are a pure edit of an existing calendar item, I make sure the source value is set and not lost/nulled anywhere. Even if worst case it does the below and sets it to an empty object. (Note, this may be a cause of my problems, I just don't know enough about full calendar). Sometimes I even have to force it to be {}, otherwise it has multiple items in source and I again end up with duplicate calendar entries after updating.
calEvent.source = calEvent.source ? calEvent.source : {};
I then update my existing calendar with a call to renderEvent.
$('#calendar').fullCalendar( 'renderEvent', calEvent, true);
Unfortunately, I'm running into the case where the new calEvent sent to renderEvent is updated, and it does not update the instance on the calendar. This may be because of the source field? And it only happens for newly dynamically added events.
Can someone assist about how to properly edit events? And how this source field should properly be used.
On the month view, is there a way to display an image along with the event "title"? (The events would be categorized and there would be a separate image for each category. )
On the week/day views, can an image be displayed along with other information?
I've read through the documentation and dozens and dozens of the questions here (and learned a lot from the answers), but didn't see this addressed. (A background image for the event won't work for this.) If I replace the title text with the img tag, the tag itself is displayed rather than rendering the image.
I'm a rookie at this (jQuery, etc.), so sorry if this is a silly question. I'm off to read the documentation again.
Simply add another name value pair to the data-in. In this case, I have added ...imageurl:value...
[{title:'Language - Session Title',dow:[1,2,4], start:'10:30:00', end: '11:00:00'},
{imageurl:'images/flag/flag_india.png', title: 'Meeting',start:'2017-04-25T10:30:00'}];
$('#calendar').fullCalendar({
......
eventRender: function(event, eventElement, view) {
if (event.imageurl) {eventElement.find(".fc-title").prepend("<img src='" + event.imageurl +"'> ");}}
......
}
I'm new to FullCalendar.
In my project, I need to show Calendar with time range and allocated participants for each training center for each day.
To be more precise, a day can have many training slot that will be conducted by training center.
So, I would like to show which training center is allocated to which time ranges and the number of available slot.
Recently, I saw FullCalendar control can show time and events.
For my case, I want to add links(one will go to editing of training slot and another link will go to editing of training participants.)
How can i done this?
with thanks,
Thura
You can add buttons to the calendar; look at this utoob flick
http://www.youtube.com/watch?v=UKUu9KJxunI
That was my calendar and the code and explanation is found here
JQuery full calendar, how to change view
You will have to insert buttons manually- There is no way of doing it out of the box with fullcalnedar.
eventRender: function (event, element) {
//element.find('.fc-event-inner').append("<p>" + event.description + "</p>");
if (event.innerHtml != null)
element.find('.fc-event-inner').append(event.innerHtml);
}
and send the innerHtml inside the event object.