This may be a specific issue but I am stuck after quite some debugging done. Maybe a fresh pair of eyes would see something I am missing. I have posted only the relevant code snippets, as it is a bigger app.
Everything works fine, however I keep getting this error and I don't exactly know what would be causing it and how it could affect the code.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'agendaDay',
defaultTimedEventDuration: '00:10:00',
locale: 'ro',
timeFormat:'H:mm',
slotLabelFormat:"HH:mm",
axisFormat: 'H:mm',
navLinks: true,
selectable: true,
selectHelper: true,
allDaySlot: false,
eventClick: function(calEvent, jsEvent, view) {
editEvent(calEvent);
},
eventLimit: true // allow "more" link when too many events
});
console.log('The right one');
$("#starts-at").datetimepicker({
minDate: new Date(),
locale: 'ro'
});
$("#starts-at-edited").datetimepicker({
minDate: new Date(),
locale: 'ro'
});
<script src='vendor/jquery.min.js'></script>
<script src='vendor/bootstrap.min.js'></script>
<script src='vendor/moment.min.js'></script>
<script src='vendor/fullcalendar.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script src='vendor/locale/ro.js'></script>
<script src='calendar.js'></script>
Related
Iam working on full calendar version v3.2.0.But In week and time view,Time slots are not appearing in left hand column
I have tried following Code in calendar:
$('#calendar').fullCalendar({
header: {
left: 'today prev,next',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
contentHeight:'auto', //auto
slotDuration: '00:15:00',
slotLabelInterval: 15,
slotLabelFormat: 'h(:mm)a',
defaultDate: moment().format("YYYY-MM-DD"),
navLinks:true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
weekends: component.get('v.weekends'),
eventBackgroundColor: component.get('v.eventBackgroundColor'),
eventBorderColor: component.get('v.eventBorderColor'),
eventTextColor: component.get('v.eventTextColor'),
events: eventArray,
The answer at Fullcalendar event's end time is missing is for an older version of fullcalendar. It's not the answer I want.
In my fullcalendar application, when I create a "half-an-hour" event it just show only event start time and title at week view.
For one hour and longer events, there are no problems I encounter. It only happens at "half-an-hour" events. So, I don't know if this is a feature or not.
I want my events to be displayed like "08:00 - 08:30" (start - end) even for half an hour events.
My code:
var calendar = $('#calendar').fullCalendar({
allDaySlot: false,
eventOverlap: false,
selectOverlap: false,
editable: false,
eventStartEditable: false,
eventDurationEditable: false,
timezone: 'local',
timeFormat: "HH:mm",
minTime: "08:00:00",
maxTime: "20:00:00",
header: header,
selectable: true,
selectHelper: false,
defaultView: "agendaWeek",
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
view: {
agendaWeek: {
columnFormat: "M/D [(]ddd[)]"
}
},
select: function(start, end, allDay) {
...
}
eventClick: function(calEvent, jsEvent, view) {
...
}
});
ScreenShot (SS):
Note: Sometimes even event titles cannot be seen in the week view of Fullcalendar.
I am working on a project where users create appointments using fullcalendar. Users can only create appointments on those timeslots(30min) that are available. These events are coming from a file named as events_json.php. i am including this file in like this
$(document).ready(function() {
$myCalendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
theme: true,
selectable: true,
selectHelper: true,
height: 500,
events: 'JSON/events_json.php',
select: function(start, end, allDay) {
//$('#eventStart').datepicker("setDate", new Date(start));
/*$('#eventStart').datepicker({
dateFormat: 'dd-mm-yy'
},new Date(start));
$('#eventEnd').datepicker({
dateFormat: 'dd-mm-yy'
},new Date(end));*/
$('#calEventDialog').dialog('open');
},
editable: false
});
Now the events are showing but i don't want to show the user that, user should only see the time-slots as disabled and the free time-slots as links with title as "Book".
I found the renderEvent in documentation but couldn't get around it.
EDIT 1
The events_json.php is sending events like this
The file is sending events like this,
$output_arrays = array(array("title"=>"Happy Hour", "start"=>"2016-01-13T07:00:00-05:00"),
array("title"=>"Click for Google", "start"=> "2016-09-02")
);
echo json_encode($output_arrays);
In order to show existing events as "taken", you can handle the eventDataTransform event.
$(document).ready(function() {
$myCalendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
theme: true,
selectable: true,
selectHelper: true,
height: 500,
events: 'JSON/events_json.php',
eventDataTransform: function(event) //this is called once for each event returned in the JSON
{
event.title = "Taken";
return event;
},
select: function(start, end, allDay) {
//$('#eventStart').datepicker("setDate", new Date(start));
/*$('#eventStart').datepicker({
dateFormat: 'dd-mm-yy'
},new Date(start));
$('#eventEnd').datepicker({
dateFormat: 'dd-mm-yy'
},new Date(end));*/
$('#calEventDialog').dialog('open');
},
editable: false
});
N.B. the "eventRender" you mention isn't an event, it's a method you can call to add new events to the calendar on the client-side. That's probably why it didn't help you in this situation. It might be more helpful when you want users to book into a slot - handle the "select" event (as you're doing already) and then use renderEvent to create a new appointment on the calendar. You can control the duration and all other properties of the event that gets added.
I'm trying to create a events calendar using Fullcalendar JS And I'm stuck with axisFormat, its always add 2 minutes. How can i solve this problem?
Picture
Calendar JS from Index
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title'
},
defaultView: 'agendaWeek',
minTime: '09:00',
maxTime: '23:00',
axisFormat: 'HH:MM',
overlap: false,
editable: false,
selectable: true,
slotEventOverlap: false,
selectOverlap: false,
eventOverlap: false,
events: {
url: "<?= URL::to('/data/schedule/futsal') ?>",
beforeSend: function(intervalStart, intervalEnd){
console.log(moment(intervalStart).format('YYYY-MM-DD HH:MM:SS')+'#'+moment(intervalEnd).format('YYYY-MM-DD HH:MM:SS'));
},
error: function() {
alert("error!!!");
},
success: function(index, data){
console.log(data);
}
}
});
You have given wrong axisformat.
Try this
axisFormat: 'HH:mm',
You need to give moment format
This will work for sure.
i have a calendar working with the following code:
$( document).ready( function(){
$('#calendar').fullCalendar( {
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay' },
editable: true,
slotDuration: '00:15:00',
defaultView: 'agendaWeek',
eventLimit: true,
events: source
}
)}
Following this flddle, i tried to set the slotDuration to 15 min, but it's not working. It just uses the default 30 min.
The only hint i get is this error when i open the calendar on Chrome:
Failed to get text for stylesheet 37: No style sheet with given id found
Any idea of which might be the problem?