I have an event with a color bar extending over 3 days. I would like a number to show how many days that color bar extends across. So, if I have a color bar thru jan 1, 2 & 3... I want a number show that says "3". representing "3 days". I assume it IS event durations?
You can modify the event in 'eventRender' callback.
untested but i think this would work:
$('#calendar').fullCalendar({
// some other options,
eventRender: function(event, element, view) {
var duration = moment.duration(event.end - event.start).days();
element.find('.fc-title').append(duration);
}
});
Related
in the Agenda view for the Kendo-UI scheduler, it displays "Date, Time, Event" columns. I also have an extra column that displays a different attribute of the event I am displaying.
What I want to accomplish is to switch the positioning of the extra column with the "Date" column. I had found a few things, such as kendo grid reordering and also using css to change placement in the scheduler, but neither method seems applicable to my situation. The css in particular was using float left/right, but that messes up the columns instead.
Below are links to the images of my issue as well as the classes they are assigned on the scheduler.
AgendaCols
classInfo
Also, as a bonus, I'd like to know if I can add a title in the orange part of the first picture, since it's currently blank while the other three each have a title that is built-in.
Thanks for your time,
Alpr
You can specify date: true specifically for the Agenda view by specifying this in the scheduler's options object:
views: [{
type: "agenda",
group: {
date: true
}
}, "week", "day"]
Notice that the group's date: true setting is inside the agenda entry in the views array.
when triggering navigation event, this solved my issue (this.schedule is what my kendo scheduler is declared as):
navigate(event: any) {
if (event != null) {
...omitted...
if (event.view == "agenda") {
this.schedule.options.group.date = true;
} else {
this.schedule.options.group.date = false;
}
...omitted...
};
};
I want to increase the space between two events in month view of full calendar.
you need to modify css element of event in EventRender Function
you can achieve spacing between events like this
eventRender: function (event, element, view) {
$(element).css("margin-top", "5px");
$(element).css("margin-bottom", "5px");
}
I have a fullCalendar working fairly well. However, I would like to be able to drag an event which is not allDay and drag it to span multiple days.
For example: I have an event that is slotted in for Feb 5, from 10am - 12pm. I'd like to be able to drag the event to the right so that it spans multiple days. The end result being an event that spans from Feb 5, 10am - Feb 9, 12pm (or basically any day after than the original).
Is this possible?
Thanks
To resize over multiple days and create an event from 10-12 each individual day use the snippet below.
To resize one event across multiple days and keep the same start time and end time, the plugin resize already does that?
See the eventResize callback. http://arshaw.com/fullcalendar/docs/event_ui/eventResize/
$('#calendar').fullCalendar({
events: [
// events here
],
editable: true,
eventResize: function(event,dayDelta,minuteDelta,revertFunc) {
if(dayDelta >= 1 && !event.allDay) {
revertFunc();
for (var i = 0 ; i < dayDelta ; i ++) {
var newEvent = {
id: event.id,
title : event.title,
start : new Date(event.start),
end : new Date(event.end),
allDay : event.allDay
};
newEvent.start.setDate(newEvent.start.getDate()+(i+1));
newEvent.end.setDate(newEvent.end.getDate()+(i+1));
$('#calendar').fullCalendar( 'renderEvent', newEvent , 'stick');
}
}
}
});
Quick Background:
I am making a Paid Time Off (PTO) calendar for several regions in the US.
I am using Zend framework, jquery, fullcalendar, Expand/All by www.adipalaz.com, and a custom "more..." link
I have 3 different jquery tabs with a new instance of a calendar on each tab (level 1)
Each tab has a different topic related to the PTO, with 3 accordion sections
One accordion section per tab has a filter to filter the results on the calendar
One accordion section per tab has a calendar on it (level 2)
The first calendar pulls from two different Event sources through a JSON call/feed
This calendar pulls PTO according to region
The regions are displayed as an all day event
Each "event" is an Expand/Collapse using www.adipalaz.com (level 3)
When each "event" is expanded or collapsed using the www.adipalaz.com an AJAX call pulls all the PTO related to that region
Each expanded AJAX call hides details about the extra info unless the custom "more..." link is clicked (level 4)
Each custom more link also has some actions (level 5)
Now, all of the above works.
I have a .click function which handles "level 3" and above. Part of this .click function is the AJAX call and another part gets and sets the z-index so that my "level 4" data pops above all the other non-expanded "level 3" data.
So far, that functionality is fine. The problem is all my underlying data still needs to be visible.
My multi-tiered problem
rerender all the events on the calendar so that the week and events are all visible regardless of the clicked "level 3"
once rerendered not losing the "level 3" .click action which disappears if I use the $('#calendar1').fullCalendar( 'rerenderEvents'); and not losing the "level 3" data that was displayed prior to trying to rerender the event.
I have images visually explaining my question but am unable to upload them due to this being my first post. If you have an idea how to help me and need to see the pictures just let me know.
Currently this is all I have towards this problem:
//POPS THE OPEN ITEM UP IN Z-INDEX
$(uniqueID).parent().parent().css('z-index',9);
//THIS FINDS OUT WHAT TO ADD
changeSizeOfDiv = $(uniqueID).next('.fc-event-names').html(data).outerHeight()
+ $('.fc-week' + level + ' .fc-sun').outerHeight();
//THIS ALTERS THE ROW SIZE
$('tr.fc-week' + level).css('height',changeSizeOfDiv);
I still haven't figured out how to dynamically update the following row "top: #px;" after clicking on a region. I think just pushing the top down by using the changeSizeOfDiv function should work but as of right now I have no idea how to do this, let alone do this elegantly.
Any ideas would be welcome.
Thanks
So with a lot of help this is what I came up with and it works like a charm. I added this to the calendar initialization
eventClick: function(event, element) {
if (typeof event.originalTitle == 'undefined') {
event.originalTitle = event.title;
}
if (event.loaded) {
event.title = event.originalTitle;
event.loaded = false;
$('#calendar1').fullCalendar('updateEvent',event);
} else {
$.ajax({
url: regionNamesUrl + getFilterUrlPart(event.segmentDate,event.region),
dataType: 'html',
cache: false,
success: function(data){
event.title = event.originalTitle + '<br/><br/>' +data;
event.loaded = true;
$('#calendar1').fullCalendar('updateEvent',event);
clicker(event,'approved');
clicker(event,'cancelled');
},
error: function(data){
alert('An error has occurred retrieving data from the server. Try reloading the page.');
}
});
}
}
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
}
});