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
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 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.
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
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
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
buttonText: {
today: 'today',
month: 'month',
week: 'week',
day: 'day'
},
//Random default events
events : <?php echo json_encode($events1);?>,
editable: true,
droppable: true, // this allows things to be dropped onto the calendar !!!
drop: function (date, allDay) { // this function is called when something is dropped
i need to split into 15 minutes interval.the default is 30 minutes slots.how can i achieve it thank u in advance
I think you're looking for slotDuration: http://fullcalendar.io/docs/agenda/slotDuration/