Sorry for my English, I'm french
var options = {
header: {
left: 'prev,next',
center: 'title,today',
right: 'month,agendaWeek,agendaDay'
},
buttonText: {
prev: '<i class="icon-chevron-left cal_prev" />',
next: '<i class="icon-chevron-right cal_next" />',
today: "aujourd'hui",
month: "mois",
day:"jour",
week: "semaine"
},
monthNames:['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
monthNamesShort:['janv.','févr.','mars','avr.','mai','juin','juil.','août','sept.','oct.','nov.','déc.'],
dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
dayNamesShort: [ 'Dim','Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
events: 'actions.php?IDuser=1',
};
$('#calendar').fullCalendar(options);
My json:
[{"id":"2","title":"rt","start":"1367236500","end":"1367236500","url":null,"allDay":"false"},{"id":"5","title":"fgh","start":"1367236800","end":"1367596800","url":null,"allDay":"false"},{"id":"3","title":"test\u00e9 par moi","start":"1367237100","end":"1367258700","url":null,"allDay":"false"},{"id":"4","title":"dfsgfdgd","start":"1367323200","end":"1367326800","url":null,"allDay":"false"}]
I see events on all-days view but nothing on hours in week or day view.
I added allDayDefault: false but the result is the same.
in the json feed the allDay = false must be boolean. You have to remove the quotes from the "false"
Just for the people who are blocked on this later.
It's an optional parameter but the event won't show in week or day view if it's not specified in your json object return by your script! It will be displayed only in month view.
This is an error of the plugin documentation so be careful !
Remember and cross check about these values in your jQuery minTime: and maxTime: values, because FullCalendar works in 24 hours time format and remembers the time you are rendering it is according to the FullCalendar format.
Related
I have a Ruby on Rails project that i'm currently working on that will schedule assigned work tickets for Technicians based on their availability and daily schedule using Full Calendar. I currently have several technicians schedules (start/stop times) saved in my Postgres database ready to be pulled and hopefully displayed into FullCalendar. The plan is for the Calendar to render the imported schedule and for the available times that a technician is working will be where I would like an event to only be placed and for the other areas in which they're not available to work I would like them to be greyed/darkened out.
So Far I have setup in an initial basic calendar and have been playing around with the eventConstraint option but that does not give the user any visual feedback on where events are allowed to be placed. This is what my current set up and technician schedules table looks like.
create_table "technician_schedules", force: :cascade do |t|
t.datetime "start_time"
t.datetime "end_time"
t.string "work_type"
t.integer "technician_id"
t.datetime "created_at", null: false
t.datetime "updated_at", null: false
end
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid', 'timeGrid', 'list', 'interaction', 'bootstrap' ],
themeSystem: 'bootstrap',
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
defaultView: 'timeGridWeek',
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
businessHours: true,
eventConstraint: {
startTime: '2019-09-04T10:00:00',
endTime: '2019-09-05T20:00:00'
},
events: [
{
id: 999,
title: 'event',
start: new Date(2019, 9, 1)
},
],
windowResize: function(view) {
var current_view = view['name'];
var expected_view = $(window).width() > 576 ? 'timeGridWeek' : 'timeGridDay';
if (current_view !== expected_view) {
calendar.changeView(expected_view);
}
}
});
calendar.render();
});
I am still very new to FullCalendar and learning and I am not sure if eventConstraint would be the best option, nor am I familiar with how best to render pre planned schedules from my database. How do I best display a an imported work schedule with unavailable technician times greyed/darkened out with the other times being available for event assignment? Any help would be greatly appreciated. Thanks
My goal is to have 2 different FullCalendar elements that stay in sync. I'm not doing ANY network calls, simply client side arrays at this point.
When I add an event (say through a click or just right after it's built) the calendar does not actually re-render as the documentation claims.
I've also attempted to use the "renderEvents" and "renderEvent" flavors but that seems unnecessary since "updateEvents" would/should update the rendering of these events. The problem I also ran into is the "renderEvent" on the list version of the calendar does not show the event I'm adding if it's out of the range of that calendar.
const events = [{
title: 'All Day Event',
start: TODAY
},
{
title: 'Long Event',
start: TODAY,
end: NEXTDAY
}
]
$("#calendar").fullCalendar({
header: {
left: '',
center: 'title',
right: ''
},
events
})
$("#events").fullCalendar({
header: {
left: '',
center: 'title',
right: ''
},
defaultView: 'listMonth',
events
})
// Now add a new one
events.push([{
title: 'Event added',
start: YESTERDAY
}])
$('#calendar').fullCalendar('updateEvents', events)
$('#events').fullCalendar('updateEvents', events)
Here's a recreation of the issue:
https://jsfiddle.net/Kikketer/7d92utp5/
The use case is pretty simple: Add a new event to the list of events, render the events on the calendar.
firstly change your pushing event to object from array.
events.push({
title: 'Event added',
start: YESTERDAY
});
Now, you have many choice to do that. I will write 2 way for you.
a.
$('#calendar').fullCalendar( 'removeEvents');
$('#calendar').fullCalendar('addEventSource', events);
https://jsfiddle.net/7d92utp5/49/
b. 1) Change events param to function
$("#calendar").fullCalendar({
header: {
left: '',
center: 'title',
right: ''
},
// at here
events: function (start, end, timezone, callback) {
callback(events);
}
});
2) Use refetchEvents instead updateEvents
$('#calendar').fullCalendar('refetchEvents');
https://jsfiddle.net/7d92utp5/53/
Is is possible to create a view like attached using the fullcalendar scheduler? Basically group by day. Like showed in the images below
I figured this out by creating a custom view. The key is a type of timelineWeek and slotDuration of 24:00
views: {
timeline7Days: {
type: 'timelineWeek',
slotDuration: '24:00',
duration: { days: 7 },
buttonText: 'resource week'
}
We are trying to use both the agendaDay and basicDay views in FullCalendar. However the button for each view is a duplicate - aka we cannot change the title of the button. How can we implement both views with a different button for each?
Using v1.6.3
You can change the captions of the buttons in general with the buttonText option:
buttonText: {
prev: '‹', // <
next: '›', // >
prevYear: '«', // <<
nextYear: '»', // >>
today: 'today',
month: 'month',
week: 'week',
day: 'day'
}
It's looking for me that fc doesn't support using two of the day/week views in parallel as there are no different keys for the agenda variants. Neither in the doc nor in the defaults file on GH. You could file an issue on the tracker.
I need to create more fields for my calendar ( fullcalendar hooked up to mysql with php ). And I have been reading up on eventRender but I'm not entirely sure of the syntax and where I should put it.
Currently I have the following;
$calendar.fullCalendar({
timeslotsPerHour : 4,
defaultView:'agendaWeek',
allowCalEventOverlap : true,
overlapEventsSeparate: true,
firstDayOfWeek : 1,
businessHours :{start: 8, end: 18, limitDisplay: true },
daysToShow : 7,
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
events: "json-events.php",
eventRender : function(calEvent, $event) {
calEvent.distributor //this is my new field
},
But I its not working and I can't find any working examples to compare it with.
Thanks
Thanks for the feedback I have been able to add my custom fields using the eventRender. So now not just body and description are being passed.
My main issue now is passing the date values to the database as these are not being saved. Does anyone know of any examples where this is being used. I would really really appreciated it.
In version 4 of fullcalendar, to get non-standard field is changed a little bit. Now it accepts just one parameter as Event Object:
events: [
{
title: 'My Event',
start: '2010-01-01',
description: 'This is a cool event'
}
// more events here
],
eventRender: function(info) {
console.log(info.event.extendedProps.description);
}
Note: You can access an additional field in this way: info.event.extendedProps.description
Check documentation
you can include your own non-standard fields in each Event Object. FullCalendar will not modify or delete these fields.,this example help you eventRender
and see Event Object
Here is how I used eventRender to add some categories to each event. Then I can filter events based on category name
eventRender: function(event, element) {
element.attr("categories",event.categoryname)
}
Simply awesome calendar
Some attributes here:
{
title: 'Birthday Party',
start: new Date(y, m, d + 1, 19, 0),
end: new Date(y, m, d + 1, 22, 30),
allDay: false,
backgroundColor: "#00a65a", //Success (green)
borderColor: "#00a65a" //Success (green)
},