Would it be possible to add background text in full calendar when there is no event found for day, need help please
e.g
Just an idea:
$('#calendar').fullCalendar({
defaultView: 'month',
events: [{
title: 'event',
start: '2017-01-05 11:00',
end: '2017-01-06 13:00',
}, {
title: 'event 2',
start: '2017-01-18'
}],
dayRender: function(date, cell) {
cell.append('<div class="unavailable">Unavailable</div>');
},
eventAfterAllRender: function(view) {
var dayEvents = $('#calendar').fullCalendar('clientEvents', function(event) {
if (event.end) {
var dates = getDates(event.start, event.end);
$.each(dates, function(index, value) {
var td = $('td.fc-day[data-date="' + value + '"]');
td.find('div:first').remove();
});
} else {
var td = $('td.fc-day[data-date="' + event.start.format('YYYY-MM-DD') + '"]');
td.find('div:first').remove();
}
});
}
});
function getDates(startDate, endDate) {
var now = startDate,
dates = [];
while (now.format('YYYY-MM-DD') <= endDate.format('YYYY-MM-DD')) {
dates.push(now.format('YYYY-MM-DD'));
now.add('days', 1);
}
return dates;
};
Try this fiddle.
Related
when i edit a event list, it correctly reload but calendar don't refresh.
if i click in other tab and then return in calendar tab it refresh: problem with bootstrap? This is my function to init calendar
function getCalendar(mydate) {
//Date for the calendar events (dummy data)
var date = new Date()
var d = date.getDate(),
m = date.getMonth(),
y = date.getFullYear()
var calendar = FullCalendar.Calendar;
var calendarEl = document.getElementById('calendar');
var calEv=bindEvents(mydate);
//var calRi=bindResource(mydate);
dCal = new calendar(calendarEl, {
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
timeZone: 'UTC',
height: '100%',
contentHeight: 'auto',
initialView: 'dayGridMonth',
themeSystem: 'bootstrap',
locale: 'it',
//Random default events
//events: 'https://fullcalendar.io/demo-events.json',
//events: bindEvents(mydate),
//events: calEv,
//events: evUrl,
events: function(info, successCallback, failureCallback) {
var evUrl = window.apiurl+'/api/anagrafiche/tourfascecalevents/'+id_entita;
$.ajax(evUrl, {
type: 'GET',
cache: false,
}).done(function(dati) {
dbgConsole("render init ev");
dbgConsole(dati);
ev=bindEvents(dati);
dbgConsole(ev);
successCallback(ev);
}).fail(function(x,s,t) {
alert_error(x);
});
},
//resources: bindResource(mydate),
initialDate: dataIni,
editable : true,
selectable: true,
droppable : false, // this allows things to be dropped onto the calendar !!!
dateClick: function(info) {
dbgConsole(info);//event.setProp( name, value )
var cls=[];
var data_fine = moment(info.dateStr, "YYYY-MM-DD").add(gg_viaggio, 'days').format('YYYY-MM-DD');
if ('undefined' == typeof grpSelected || ''==grpSelected) {
// alert('Cancellazione data: ' + info.dateStr + ' !');
var reqUrl = window.apiurl+'/api/anagrafiche/tourfasce/'+id_entita;
$.ajax(reqUrl, {
type: 'DELETE',
cache: false,
data: {
id_gruppo: id_gruppo,
id_entita: id_entita,
MM_delete: 'form_fascedel',
data_inizio: info.dateStr
}
}).done(function(dati) {
window.tables['FasceTable'].setData();
dbgConsole("render");
//$('#h-tab').trigger('click');
//$('#dati-fasce-tab').trigger('click');
dCal.render();
//dCal.updateSize();
}).fail(function(x,s,t) {
alert_error(x);
});
} else {
// alert('Imposta data: ' + info.dateStr + ' in gruppo "'+grpSelected+'" !');
var reqUrl = window.apiurl+'/api/anagrafiche/tourfasce/'+id_entita;
$.ajax(reqUrl, {
type: 'PUT',
cache: false,
data: {
id_gruppo: id_gruppo,
id_entita: id_entita,
MM_update: 'form_fasceupd',
data_inizio: info.dateStr,
nome_periodo: grpSelected,
data_fine: data_fine
}
}).done(function(dati) {
window.tables['FasceTable'].setData();
dbgConsole("render");
//$('#h-tab').trigger('click');
//$('#dati-fasce-tab').trigger('click');
dCal.render();
//dCal.updateSize();
}).fail(function(x,s,t) {
alert_error(x);
});
}
// alert('Gruppo: ' + id_gruppo + ' - Entita: "'+id_entita+ ' - Giorni: "'+gg_viaggio+'" !');
//dCal.setOption('initialDate', '2021-06-01');
//dCal.render();
},
/*
eventClick: function(calEvent, jsEvent, view) {
var testo='';
testo=testo+'Servizio: ' + calEvent.title_serv+'\n';
testo=testo+'Inizio: ' + calEvent.start.format()+'\n';
testo=testo+'Fine: ' + calEvent.end.format()+'\n';
testo=testo+'Descrizione: ' + calEvent.title+'\n';
alert(testo);
}
*/
});
//dCal.render();
dbgConsole("Cal:")
dbgConsole(dCal);//event.setProp( name, value )
}
and this is activation
$('#dati-fasce-tab').on('shown.bs.tab', function (event) {
dCal.render();
})
after 'dateClick' events are modified and reloaded but calendar not update view
P.S.: all events are type 'background'
Already exists any different method to refresh?
We are a problem to refresh on load calendar in hidden area, any idea?
First of all, you need to render the fullcalendar element inside the initialize function.
function getCalendar(mydate) {
...
dCal = new calendar(calendarEl, {
});
dCal.render();
}
After that, you need to use refetchEvents function while an event like changing tab or save an event is firing.
https://fullcalendar.io/docs/Calendar-refetchEvents
dCal.refetchEvents();
You could face into an issue like dCal is undefined, then you need to add some handling like
if (typeof dCal !== 'undefined') {
dCal.refetchEvents();
}
I'm using an auto-run block where I re-execute the same mongo with a few session variables ! loop over those doc , construct an array of events then I call the addEventSource and refetchResources function which are pretty expensive computationally ! the fullcalendar becomes slow the more data ! on every action the auto-run block is rerun ! what in your in your opinion can be done to speed things up ? I thought about only re-rendering the delta elements but this doesn't cover the deletion and update .
calendar = $('#calendar').fullCalendar({
schedulerLicenseKey: Meteor.settings.public.fullCalendarLicenseKey,
now: new Date(),
editable: true, // enable draggable events
droppable: true, // this allows things to be dropped onto the calendar
aspectRatio: 1.8,
timezone:'local',
disableDragging: true,
displayEventTime: false,
selectable:true,
allDaySlot:true,
slotDuration:'24:00',
lazyFetching:true,
resourceLabelText: 'Employees',
nextDayThreshold:"12:00",
resources: function(callback) {
var tmp_obj = { usersSorting : { } };
tmp_obj.usersSorting["indexByLocation."+Session.get("locationId")] = 1;
var users = [];
var data = Meteor.users.find({
$or:[
{"profile.showInScheduler":{$exists:false}},
{"profile.showInScheduler":true}
],
assignedTo:{$in:[Session.get("locationId")]},
'locations._id':Session.get("locationId"),
"profile.companyId":Session.get("companyId")
},{sort : tmp_obj.usersSorting});
var arr = data.map(function(c) {
var employeeType = c.userSettings.employeeType;
var type = EmployeeType.findOne({_id:employeeType});
var img = Images.findOne({_id: c.picture});
var imgUrl = img ? img.url() : "/images/default-avatar.png";
c.name = c.name || "";
var totalHoursAllLocation = 0;
var totalHoursCurrentLocation = 0;
return {
id: c._id,
title: "t",
width:"2px"
};
});
callback(arr);
},
drop: function(date, jsEvent, ui, resourceId) {
},
eventResize: function( event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view ) {
},
dayClick: function(date, jsEvent, view,res,res2) {
},
eventClick: function ( event, jsEvent, view ) {
}
}).data().fullCalendar;
/********************* reactive calendar *****************/
this.autorun(function() {
if(Session.get("activeUsers")) {
schedulerSubs = Meteor.subscribe("SchedulesByLocation", Session.get("companyId"), Session.get("locationId"), Session.get("activeUsers"), moment(Session.get("currentDate")).startOf('week').toDate(), moment(Session.get("currentDate")).startOf('week').add(2, "weeks").endOf('isoweek').add(1,"days").toDate());
}
const company = Companies.findOne({_id: Session.get("companyId")});
Session.set("loading", true);
let events = [];
let usersInLocation = Meteor.users.find({
assignedTo: {$in: [Session.get("locationId")]},
'locations._id': Session.get("locationId"),
"profile.companyId": Session.get("companyId")
}).fetch();
let userIds = _.map(usersInLocation, "_id");
userIds.push("temp" + Session.get("companyId") + Session.get("locationId"));
Session.set("activeUsers",userIds);
if(schedulerSubs && schedulerSubs.ready()) {
var data;
SchedulerEvts = Schedules.find({
uid: {$in: userIds},
locationId: Session.get("locationId"),
companyId: Session.get("companyId"),
start: {$gte: moment(Session.get("currentDate")).startOf('week').toDate()},
end: {$lte: moment(Session.get("currentDate")).add(2, "week").endOf('isoweek').toDate()}
}).fetch();
SchedulerEvts.forEach(function (evt) {
var event = null;
var color = "";
var oloc = "";
var attendance = null;
var locationName = "";
var id = evt._id;
event = {
id:id,
type : evt.type,
title: evt.name,
start: evt.start,
end: evt.end,
color:color,
resourceId: evt.uid,
locationName:locationName,
};
events.push(event);
});
if (calendar) {
calendar.removeEvents();
calendar.addEventSource(events);
calendar.refetchResources();
}
}
I have this app with fullcalendar and everything but the eventDataTransform works fine. The code is really large, so i will publish the relevant parts
$(document).ready(function () {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,basicDay',
},
allDaySlot: false,
nextDayThreshold: '00:00:00',
slotLabelFormat: 'h(:mm)a',
views: {
month: {
//para que no se pueda arrastrar en la vista month
droppable: false,
timeFormat: 'h(:mm)a',
showNonCurrentDates:true,
},
week: {
timeFormat: 'h:mm:ss a'
},
day: {
timeFormat: 'h:mm:ss a'
},
basicDay:{
droppable: false,
}
},
locale: getVarLocale(),
editable: true,
droppable: true,
slotDuration: '00:15:00',
eventDurationEditable:false,
eventDragStart:function( event, jsEvent, ui, view ) {
isDragging=true;
},
eventDragStop:function( event, jsEvent, ui, view ) {
isDragging=false;
},
dayClick: function (date, jsEvent, view) {
if(isValidDate(date)==false)
return false;
if (view.name === "month") {
$('#calendar').fullCalendar('gotoDate', date);
$('#calendar').fullCalendar('changeView', 'agendaDay');
}
},
eventOverlap: function (stillEvent, movingEvent) {
if(stillEvent.start.isSame(movingEvent.end)||stillEvent.end.isSame(movingEvent.start)){
return false;
}
if (movingEvent.type == tiposEventos.bloque){
if(isDragging==false)
performAlert(translationCal.noNestedBlock,'event');
return false;
}
if(movingEvent.overlaped==false){
if (stillEvent.type!=tiposEventos.bloque){
if(isDragging==false)
performAlert(translationCal.noOverlapAllowed,'block');
return false;}
}
if(movingEvent.start.isBefore(stillEvent.start)){
if(isDragging==false)
return false;
}
updateEvent(stillEvent, movingEvent,true);
return true;
function performAlert(msg,type){
var alerted = localStorage.getItem(type) || '';
if(alerted=='alerted')
return false;
localStorage.setItem(type,'alerted');
var e=Array();
e.push(msg);
addModalError('pm-modal-error',$translation.error, e);
}
},
eventDataTransform:function(eventData){
console.log(eventData);
},
eventSources:[
{
events: function (start, end, timezone, callback) {
var events = [];
var options = {};
options.data = {};
options.data.start=start.format('YYYY-MM-DD');
options.data.end=end.format('YYYY-MM-DD');
options.type = 'text/json'
options.method = 'POST';
options.url = Routing.generate('publication_all');
options.errorcallback = function (error) {
console.log(error);
}
options.successcallback = function (data) {
var parseData = JSON.parse(data);
$(parseData).each(function () {
var startTime = this.startTime;
startTime = (((startTime.date).split(' ')[1]).split('.'))[0];
var startObj = moment(startTime, 'HH:mm:ss');
var startDate = (this.startDate.date).split(' ')[0];
var startDate = moment(startDate, 'YYYY-MM-DD HH:mm:ss').utcOffset(+0000);
startDate.set({
'hour': startObj.get('hour'),
'minute': startObj.get('minute'),
'second': startObj.get('second')
});
var endTime = this.endTime;
endTime = (((endTime.date).split(' ')[1]).split('.'))[0];
var endObj = moment(endTime, 'HH:mm:ss');
var endDate = (this.endDate.date).split(' ')[0];
endDate = moment(endDate, 'YYYY-MM-DD HH:mm:ss').utcOffset(+0000);
endDate.set({
'hour': endObj.get('hour'),
'minute': endObj.get('minute'),
'second': endObj.get('second')
});
if(isValidDate(startDate)==true){
events.push(
{
title: this.title, // use the element's text as the event title
idRef: this.idRef,
type: this.type,
publicationId: this.idPub,
color: setColors(this.type,this.idRef),
overlaped: false,
overlaps: false,
parentBlock: this.parent,
start: startDate,
end: (startDate.diff(endDate)==0)?endDate.set({'second':endDate.get('second')+1}):endDate,
stick: true,
idRef: this.ref,
direct:-1,
allDay:false,
durationEditable:(this.type==tiposEventos.bloque||this.type==tiposEventos.patron||this.type==tiposEventos.sennal)?true:false
}
);
}
});
callback(events);
};
ajaxAccess(options);
}
}
],
});
});
The thing is, everything works fine, but the eventDataTransform always throws TypeError: input is undefined
out._id = input._id || (input.id === undefined ? '_fc' + eventGUID++ : input.id ...
I checked the docs and I am calling the event in the proper way. I dont know if the problem is related to the fact that my eventSource is an ajax function.
your function doesn't return anything.
the eventDataTransform function has to. At least you could test:
console.log(eventData);
return eventData;
I've a calendar that I want to list various types of event on and enable a checkbox filter to show/hide those kind of events.
Is there a way to say on this action, ONLY load from 1 data-source AND remember that URL on month next/prev links?
I've started using eventSources, but it loads them all, rather than the one(s) I want.. Here's what I have.
var fcSources = {
all: {
url: tournament_url + '/getCalendar/?typefilter=[1,2]'
},
type1: {
url: tournament_url + '/getCalendar/?typefilter=[1]'
},
type2: {
url: tournament_url + '/getCalendar/?typefilter=[2]'
}
};
These URLS all provide a json string of events, based on the types prrovided.
Here's my calendar:
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek'
},
firstDay: 1, // Monday = 1
defaultDate: new Date(), // Now
editable: true,
eventSources: [ fcSources.all ],
events: fcSources.all,
nextDayThreshold: '00:00:00',
... etc etc
Above my calendar I have this:
input type="checkbox" name="event_filter[]" value="type1" /> Type 1
input type="checkbox" name="event_filter[]" value="type2" /> Type 2
And finally , two Jquery fucntions.. one to get all the filters:
function getFilters(getName) {
var filters = [];
var checked = [];
$("input[name='"+getName+"[]']").each(function () {
filters.push( $(this).val() );
});
$("input[name='"+getName+"[]']:checked").each(function () {
checked.push( $(this).val() );
});
return [filters, checked];
}
and the last to load them:
$(".event_filter").on('click', function() {
var doFilters = getFilters('event_filter');
$('#calendar').fullCalendar( 'removeEvents' );
if (doFilters[0] === doFilters[1]) {
$('#calendar').fullCalendar( 'addEventSource', fcSources.all );
} else {
$.each(doFilters[1], function(myFilter, myVal) {
console.log(myVal);
$('#calendar').fullCalendar( 'addEventSource', fcSources.myVal );
});
}
// $('#calendar').fullCalendar( 'refetchEvents' );
});
Since the sources are all the same place and just different data on the URL, this approach could meet your needs. In the demo it just alerts the URL that is being tried but doesn't actually supply any data...
https://jsfiddle.net/gzbrc2h6/1/
var tournament_url = 'https://www.example.com/'
$('#calendar').fullCalendar({
events: {
url: tournament_url + '/getCalendar/',
data: function() {
var vals = [];
// Are the [ and ] needed in the url? If not, remove them here
// This could (should!) also be set to all input[name='event_filter[]'] val's instead of hard-coded...
var filterVal = '[1,2]';
$('input[name="event_filter[]"]:checked').each(function() {
vals.push($(this).val());
});
if (vals.length) {
filterVal = '[' + vals.join(',') + ']' // Are the [ and ] needed in the url? If not, remove here too
}
return {
typefilter: filterVal
};
},
beforeSend: function(jqXHR, settings) {
alert(unescape(settings.url));
}
}
});
// when they change the checkboxes, refresh calendar
$('input[name="event_filter[]"]').on('change', function() {
$('#calendar').fullCalendar('refetchEvents');
});
Try this!
$('#calendar').fullCalendar({
events: function( start, end, timezone, callback ) {
var checked = [];
$("input[name='event_filter[]']:checked").each(function () {
checked.push( $(this).val() );
});
var tournament_url = 'https://www.example.com';
$.ajax({
url: tournament_url + '/getCalendar/',
data: {typefilter: '['+checked.join(',')+']'},
success: function(events) {
callback(events);
}
});
}
});
$('input[name="event_filter[]"]').on('change', function() {
$('#calendar').fullCalendar('refetchEvents');
});
This works for me.
The fullcalendarAPI is in use . This will write a sentence if there is a question of being developed .
Although events in the fc-event when you expose the calendar is exposed to the calendar , we want to prevent that time , the soil , the expression on Sunday . Is there a way....?
example :
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
You can take the events start/end and break it up into sections.
https://jsfiddle.net/31gayu5b/4/
/* Fiddle specs: fullcalendar v2.4.0, moment v2.10.6, jQuery v2.1.4 */
/* If chop is true, it cuts out Saturday, Sunday */
var events = [{
start: '2016-02-01',
end: '2016-03-01',
title: 'This is the whole month long, no weekends!',
id: 'month-long-no-weekends',
chop: true
}, {
start: '2016-02-01',
end: '2016-03-01',
title: 'This is the whole month long, including weekends!',
id: 'month-long-weekends',
chop: false
}, {
start: '2016-02-07',
end: '2016-02-16',
title: 'Starts Sunday ends Tuesday the week after (no weekends)',
id: 'start-sun-no-weekends',
chop: true
}, {
start: '2016-02-07',
end: '2016-02-16',
title: 'Starts Sunday ends Tuesday the week after (has weekends)',
id: 'start-sun-weekends',
chop: false
}];
$('#calendar').fullCalendar({
defaultDate: '2016-02-01',
events: chopEvents(events),
eventClick: function(event, jsEvent, view) {
alert(event.id);
},
eventRender: function(event, element, view) {
console.log(event);
if (event.chop)
element.css('background-color', 'green');
}
});
function chopEvents(events) {
var chopped = [];
$(events).each(function() {
var event = this;
if (this.chop) {
var segments = makeChunks(this);
$(segments).each(function(index, dates) {
var start = dates.shift();
var end = dates.pop();
event.start = start;
event.end = end;
chopped.push($.extend({}, event));
});
} else {
chopped.push(event);
}
});
return chopped;
}
function makeChunks(event) {
var seg = 0;
var segments = [];
var start = moment(event.start);
var end = moment(event.end); //.add(1, 'day'); /* May want to add 1 day? */
for (var day = moment(start); day <= end; day = day.add(1, 'day')) {
var dayOfWeek = day.format('E');
if (dayOfWeek == 7) {
segments[++seg] = [];
continue;
}
if (segments[seg] === undefined) {
segments[seg] = [];
}
segments[seg].push(day.format('YYYY-MM-DD'));
}
segments = segments.filter(function(i) {
return i !== null && i.length > 1;
})
// console.log(JSON.stringify(segments, null, 2));
return segments;
}