Arshaw FullCalendar: suppress top row (date) on agendaDay view - fullcalendar

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.

Related

Event getting cut ( visible ) near 00:00

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.

Fullcalendar events from two different database tables have the same ID

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.

Fullcalendar: How to show next two month of next year in timeline view

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/

How to re-size (stretch start or end date) events on Angular UI Calendar?

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)

qtip2: Tooltip always appears in top left corner instead of targeted element

I've tried everything I can think of to get the tooltip by the hovered-over event. But for whatever reason it just appears every time in the top left corner of my browser window.
Here is my javascript:
$(document).ready(function(){
var tooltip = $('<div/>').qtip({
id:'myCalendar',
prerender:true,
content:{
text:' ',
title:{
button:true,
},
},
position:{
my:'center left',
at:'center right',
target:'mouse',
viewport:$('#myCalendar'),
adjust:{
mouse:false,
scroll:false,
},
},
show:false,
hide:false,
style:'qtip-light',}).qtip('api');
$('#myCalendar').fullCalendar({
editable:true,
eventMouseout:function(e,j,v){
tooltip.hide();
},
eventMouseover:function(e,j,v){
var event = '<h3>'+e.title+'</h3>';
tooltip.set({'content.text':event,}).reposition(e).show(e);
},
events:[{title:'All Day Event',start:new Date(y,m,1)}],
header:{left:'prev,next today',center:'title',right:'month,agendaWeek,agendaDay'},
});
});
I'm using all of the same javascript and css linked from this example on jsfiddle:
http://jsfiddle.net/craga89/N78hs/
Can someone spot where I'm going wrong?
I couldn't ever get the code above to work, so I decided to go a different route and use the render event instead. Now it works exactly as I wanted by putting the qtip in the middle of the right side of each fullcalendar event on mouse over.
$(document).ready(function(){
$('#myCalendar').fullCalendar({
editable:true,
eventRender:function(event,element,view){
element.qtip({
content:{
text:'<h3>'+event.title+'</h3>',
},
position:{
my:'center left',
at:'center right'
},
show:'mouseover',
});
},
events:[{title:'All Day Event',start:new Date(y,m,1)}],
header:{left:'prev,next today',center:'title',right:'month,agendaWeek,agendaDay'},
});
});
I still don't know why using this code works as expected. Note: I didn't change any of the stylesheets or javascript included with either fullcalendar or qtip, just something about how the code above was implemented improperly.

Resources