CODEWITHSUNDEEP
fullcalendartime-format
Frank
Frank

Reputation: 2357

Tweaking for fullcalendar axis time format and hide event time

I want to apply these two changes in fullcalendar:

  1. Axis time format like: 10:00-11:00, 11:00-12:00, 12:00-13:00...so on.

  2. Hide event time only display event name

Check snap enter image description here

Code I have applied for axis format:

jQuery('#fullcal').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },

    timeFormat: 'H:mm{-H:mmtt }',
    axisFormat: 'H:mm - H:mm',

  events: [
    {
      title: "<?php echo "Booked"; ?>",
      start: new Date(<?php echo "$date, $start"; ?>),
      end: new Date(<?php echo "$date, $end"; ?>),
      allDay: false,
      backgroundColor : "#1FCB4A",
      textColor: "black",
    },
  ],

});

Code axisFormat: 'H:mm - H:mm', repeating same time.

And in event 11:00 - Test, I want only display event name Test, if I comment start: and end: this make disappears event on fullcalendar.

Please help me to add this changes in fullcalendar. Thanks.

Upvotes: 1

Views: 5960

Answers (2)

VasanthGowda
VasanthGowda

Reputation: 1

FullCalendar does support an end time in the axisFormat. Just try below code to view 10:00 am - 10:45 am , 11:00 am - 11:45 am, etc.. 

axisFormat: 'h:mm tt - h:45 tt',

timeFormat: {
    agenda: 'h:mm{ - h:mm}'
},

Upvotes: 0

Regin Larsen
Regin Larsen

Reputation: 1152

FullCalendar doesn't support an end time in the axisFormat, but by doing a few minor changes in the FullCalendar source code it becomes possible. I've provided a solution to a similar question here: https://stackoverflow.com/a/17547384/198065.

You can hide the time in the events simply by providing setting timeFormat: ''.

Upvotes: 1

Related Questions