I'm using FullCalendar v.3.4.0 with no CSS changes.
I have only the base css and the print version declared.
As you can see on the picture, the last event, that starts near midnight, is getting cut visually.
In Fullcalendar's Github, there is a sticky issue regarding Chrome's rendering of the table, but I'm not sure if the problem lies there.
I haven't tried Firefox, but I'm running this in a webview of a Cordova app on Android, so i'm bound to Chrome.
example of the issue
Init code
$('#events').fullCalendar({
defaultView: 'agendaDay',
allDaySlot: false,
editable: false,
eventLimit: true,
displayEventTime: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
events: "remote.php"
}
Can I add a "ghost" event so it pushes the overflowed view in order to see that event? I would like avoid jquerying my way into the DOM, but if there is no other change I will do so.
Thank you in advance.
Best regards
I have solved with the following steps:
Backend
Added a field called "time" ( or any field you wish to use ) and whenever you detect the end date goes to the next day you set "time" to "23-59".
Frontend
Add the following code to your Fullcalendar init:
eventRender: function(eventObj, $el) {
if (eventObj.time == "23-59") {
$($el).css({"overflow":"inherit","height":"50px"});
}
},
eventAfterAllRender : function (view) {
if (view.type == 'agendaDay') {
$(".fc-agendaDay-view .fc-slats table tbody").append('<tr>\
<td class="fc-axis fc-time fc-widget-content" style="height:100px"></td>\
<td class="fc-widget-content"> </td>\
</tr>');
}
}
This is not an elegant solution for v3 but it suits my requirements.
Related
I have a custom button that i want to go today day.
customButtons: {
myCustomButton: {
text: 'Día Actual',
click: function(info) {
calendar.fullCalendar('today');
}
}
}
But my error is a fullCalendar('today') dont exist on v4. I can do this the other way
You're correct that calendar.fullCalendar('today'); no longer works in version 4. However this is simply due to a change of syntax. It has been directly replaced by the today method. Therefore this code:
click: function(info) {
calendar.today();
}
will solve your problem.
This change of syntax is explained in the v3 to v4 upgrade guide and there is a more detailed article in the v4 documentation about calling methods as well.
However I'd also like to point out that if all your button does is change to today's date, you don't even need a custom button at all! As documented in the header options you can simply put today as one of the buttons in the header and fullCalendar will auto-generate a button which moves to today's date.
e.g.
{
left: 'title',
center: '',
right: 'today prev,next'
}
This is visible in most of the demos on the fullCalendar site, including the ones on the home page: https://fullcalendar.io/#demos
I did the following is not the best but it works for me
customButtons: {
myCustomButton: {
text: 'Día Actual',
click: function(info) {
location.href="http://localhost:8888/Proyecto/calendario-plantillas";
}
}
},
I have two different events an event should appear in red calendar another should be blue. My example below.
editable: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
eventSources: [
{
url: 'read_simply.php',
color: 'red',
textColor: 'white'
},
{
url: 'read_recurring.php',
color: 'blue',
textColor: 'white'
}
],
theme: true,
selectable: true,
selectHelper: true,
droppable: true,
Here you can see how the sources are integrated.
Everything works until a little problem. My different events are stored in two different MariaDB tables. Some events have the same "event ID". When I try to move a (red) event to calendar, blue event with the same ID is also moved. How can I correct it???
I believe this is the expected behaviour. fullCalendar assumes that events with the same ID are linked and treats them as such.
I would suggest not to use the "id" property for your database IDs (you can just not provide this property, and fullCalendar will create a unique internal ID for itself on each event), and instead set some custom property e.g. serverID on your event so that you have a way to link it back to your database, but without causing problems within fullCalendar.
I'm using Fullcalendar and I need to show all the current year plus the next two month of the next year using a timeline view.
If I use the visibleRange option in this way:
visibleRange: function (currentDate) {
return {
start: currentDate.year()+'-01-01',
end: currentDate.year()+1 + '-02-28',
};}
The calendar show the correct period but the navigation button 'next' stop working.
I also tried to use the duration option instead but I don't know how to set the "start" period.... the calendar start always at current date.
I think there is a solution that not require the writing of a full custom view to do so.
The solution to this involves setting the dateIncrement value - this tells the next/prev buttons how far to increase/decrease the visible dates by when you customise the view range like this.
Here's an example. N.B. I've used momentJS's built-in functions, rather than string concatenation, to provide a more robust and neater way of setting the visible range. It's probably also a good idea to set the slotDuration to something that won't produce a massive long calendar. I've used a 1 month duration as an example, but obviously you can configure it to whatever you need.
$('#calendar').fullCalendar({
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
defaultView: 'timeline',
header: {
left: 'prev,next today',
center: 'title',
right: 'timeline'
},
slotDuration: { months: 1 },
dateIncrement: { years: 1 },
visibleRange: function (currentDate) {
return {
start: currentDate.clone().startOf('year'),
end: currentDate.clone().startOf('year').add({ years: 1, months: 2}),
};
},
//...etc
});
The dateIncrement setting is documented here: https://fullcalendar.io/docs/current_date/dateIncrement/
I haven't been able to find out whether the following options exists in Angular UI Calendar (http://angular-ui.github.io/ui-calendar/) or not.
http://fullcalendar.io/docs/event_ui/eventDurationEditable/
Here is the calendar init code
/* configuration */
$scope.uiConfig = {
calendar:{
height: 'auto',
editable: true,
header:{
left: 'today prev,next',
center: 'title',
right: 'month basicWeek basicDay'
},
eventDrop: $scope.onEventDrop,
eventResize: $scope.onEventResize
}
};
If anyone has done it, please suggest the property that I can use to implement.
Thanks!
To be resizable in the Month view, your events should'nt have the time part.
For example, an event with property start: '2015-02-01' will work while start: '2015-02-09T16:00:00' wont. (but it will in the Week or Day view)
Arshaw FullCalendar displays the current date in agendaDay view even if I set all headers off. I would like the entire th of that table to disappear. How do I do that in agendaDay view?
$('#calendar').fullCalendar({
defaultView: 'agendaDay',
header: {
left: 'false',
center: 'false',
right: 'false'
},
});
Fiddle
Set header itself to false:
$('#calendar').fullCalendar({
defaultView: 'agendaDay',
header: false
});
Since there is no option to remove the text and, even if you set all header options to an empty string, it still displays the day, you can use viewRender to hide the text.
So, after the calendar has been render, we will find the fc-day-header th and set html to an empty string. See a working JSFiddle. This code works for Fullcalendar 2.*.
$('#calendar').fullCalendar({
defaultView: 'agendaDay',
header: {
left: '',
center: '',
right: ''
},
viewRender: function(view, element) {
element.find('.fc-day-header').html('');
}
});
This will keep the th, but will have an height of 0. If you want to remove the entire thead, you could use element.find('.fc-day-header').parents('table:first').parents('thead').remove()
If you want to use Fullcalendar 1.6.3/1.6.4 the classnames are a bit different, and you should use
element.find(".fc-col0.fc-widget-header").html('');
Check the working fiddle using 1.6.4:
Before 1.6.3
You are using FullCalendar 1.5.3 in your fiddle. This is a really old release and I advice you to update it. I haven't looked for a solution because you didn't specify that requirement. However the one provided won't work, since eventRender was introduced in Fullcalendar 1.6.3.