The calendar doesn't display hours beside .
i have uploaded a picture and put the code to understand the problem more
how can i correct it ?
Code javascript :
$(document).ready(function () {
var date = new Date();
// the code display the calendar
$('#calendar').fullCalendar({
// the header
header:{
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
lang: 'fr',
buttonIcons: false, // show the prev/next text
editable: true, // resize event
eventLimit: true, // allow "more" link when too many events
minTime: '06:00:00',
maxTime: '20:00:00',
eventRender: function (event, element) {
element.find('.fc-title').append(" || " + event.type);
},
dayClick: function (date, jsEvent, view, resourceObj) {
//getting the clicked date from calendar
},
eventClick: function (calEvent) {
// event clicked
},
// events redered in twig template
// I an working with symfony
events:{{ events|raw }}
})
});
thank you very much i'm using fc-time{ display: none;} it's working now
Related
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 have this fullcalendar:
$('#calendar').fullCalendar({
height: 700,
locale: 'es',
header: {
left: 'prev,next, month basicWeek today',
center: 'title',
right: ''
},
buttonText: {
today: 'Hoy',
month: 'Mes',
week: 'Semana'
},
editable: true,
weekends: true,
droppable: true, // this allows things to be dropped onto the calendar
dragRevertDuration: 0,
events: $scope.events,
drop: function(date, jsEvent, ui, resourceId) {
console.log("DROP!")
}
});
I would like in drop event, get data of this day.
I drag event and drop in day 1, that it has an event called "Carmen Donoso | BAJA", and when I drop it I would like to get this event.
Thanks
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.
Am re sizing the height of the full calendar to fit in my screen. And am also limiting the events displayed in month view. So, now when I click +'x'more button, event container popup is coming at the bottom of the screen.
If am not altering the height, event container popup is aligned properly.
Please let me know how to fix popup alignment issue when calendar height is re sized.
Below is my code and attached the screenshot of calendar view
$('#calendar').fullCalendar({
now: new Date(),
editable: false,
aspectRatio: 1.8,
height: 200,
selectable: true,
scrollTime: '00:00',
header: {
left: 'prevYear,prev,next,nextYear today',
center: 'title',
right: 'timelineDay,timelineThreeDays,agendaWeek,month'
},
dayClick: function(date, jsEvent, view) {
var view = $('#calendar').fullCalendar('getView');
if (view.name == 'month') {
$('#calendar').fullCalendar('gotoDate', date._d.toISOString().slice(0, 10));
$('#calendar').fullCalendar('changeView', "timelineDay");
}
},
defaultView: 'timelineDay',
views: {
timelineThreeDays: {
type: 'timeline',
duration: {
days: 3
}
}
},
eventOverlap: false,
resourceAreaWidth: '25%',
resourceLabelText: 'Reservations',
resourceGroupField: 'building',
resources: resourcesList,
events: eventList,
eventLimit: true,
eventRender: function(event, element) {
element.find('.fc-title').append(' ' + event.statusCode);
},
});
screenshot
Earlier i was using jquery 1.7.0 and every thing was working fine.
But when i upgraded to jquery 1.8 Selecting time ranges for creating an event is not working in agendaWeek and agendaDay but works fine with month.
Here is my code :
$('#Calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
firstHour: (new Date()).getHours(),
minTime: 4,
maxTime: 24,
slotMinutes: 15,
allDaySlot: false,
defaultView: 'agendaWeek',
eventSources: [
// code for event source
],
editable: false,
selectable: true,
selectHelper: true,
ignoreTimezone: true,
loading: function (isLoading) {
//code for image loading
.............
},
select:function (start, end, allDay) {
//Code on Select
................
},
eventClick: function (calEvent, jsEvent, view) {
//Code on event clicked
.......................
});
},
eventRender: function (event, element) {
// Code on event Rendered
.................
});
}
});
When i am using jquery 1.7 Selecting time ranges for creating an event in day and week works perfectly as shown in fig below.
However Selecting time ranges for creating an event stops working when i upgrade to jquery1.8.
Thanks in Advance
The correct answer is given by Regin Larsen in the comments.
Need to upgrade fullcalendar to version 1.5.4 and jquery ui to 1.8.23.