umair.ashfr umair.ashfr - 3 months ago 21
jQuery Question

Render events as disabled fields

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);

Answer

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.