2

I am using full-calendar from fullcalendar.io and having some trouble customizing its time slot.

enter image description here

I want to add time slots like breakfast, lunch, dinner etc also user can add his/her own slots. How do I set the fixed height according to the number of slots? Also, I want to set the slot column text for breakfast, lunch etc. not 12 am, 6 am. Here's what I did until now:

var today = moment();
$('#calendar').fullCalendar({
                    droppable: true,
                    defaultView: 'Week',
                    header: false,
                    defaultDate: today,
                    navLinks: false, // can click day/week names to navigate views
                    editable: true,
                    eventLimit: true, // allow "more" link when too many events
                    schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
                    /*events: [

                        {
                            title  : 'event1',
                            start  : today,
                            imageurl:'assets/images/recipe/salad.jpg'
                        }

                    ],*/
                    /*views: {
                        agendaWeek: {
                            agendaEventMinHeight: 150,
                            allDaySlot: false,
                            slotLabelInterval: { hours: 6},
                            slotDuration: { hours: 1},
                            duration: { days: 7}
                        }
                    },*/
                    eventRender: function (event, element) {
                        element.find(".fc-event-title").remove();
                        element.find(".fc-event-time").remove();
                        var new_description = '#';
                        element.append(new_description);

                    },
                    now: today,
                    /*header: {
                        left: 'promptResource',
                        center: '',
                        right: ''

                    },*/
                    footer: {
                        left:   'promptResource',
                        center: '',
                        right:  ''
                    },
                    customButtons: {
                        promptResource: {
                            text: '+ add course',
                            click: function() {
                                var title = prompt('Course name');
                                if (title) {
                                    $('#calendar').fullCalendar(
                                        'addResource',
                                        { title: title },
                                        true // scroll to the new resource?
                                    );
                                }
                            }
                        }
                    },
                    views: {
                        Week: {
                            type: 'timeline',
                            duration: { Days: '7' },
                            slotLabelInterval: { hours: 24},
                            slotDuration: { hours: 24},
                        }
                    },
                    resourceLabelText: 'Meal',
                    resourceRender: function(resource, cellEls) {
                        cellEls.on('click', function() {
                            if (confirm('Are you sure you want to delete ' + resource.title + '?')) {
                                $('#calendar').fullCalendar('removeResource', resource);
                            }
                        });
                    },
                    resources: [
                        { id: 'a', title: 'Breakfast' , eventColor: 'red'},
                        { id: 'b', title: 'Lunch', eventColor: 'green' },
                        { id: 'c', title: 'Dinner', eventColor: 'orange' },
                        { id: 'd', title: 'Other', eventColor: 'grey'},
                        ],

                    events: [
                        { id: '1', resourceId: 'b', start: today, end: today, title: 'event 1' },
                        { id: '2', resourceId: 'c', start: '2018-04-07T05:00:00', end: '2018-04-07T22:00:00', title: 'event 2' },
                        { id: '3', resourceId: 'd', start: '2018-04-06', end: '2018-04-08', title: 'event 3' },
                        { id: '4', resourceId: 'e', start: '2018-04-07T03:00:00', end: '2018-04-07T08:00:00', title: 'event 4' },
                        { id: '5', resourceId: 'f', start: '2018-04-07T00:30:00', end: '2018-04-07T02:30:00', title: 'event 5' }
                    ]

                });
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" data-print="true" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.min.css" />
<div id="calendar"></div>

Any help would be really appreciated.

Edit: Here's what I actually want to implement. Design In design, you can see that the time of the day is not important. I want the users to add as many meals a day as they can. I just a want the option to add the meal's title(event). And remove the time slots on the left side.

update: I've managed to solve this problem to some extent. Here's how it looks now:enter image description here But still, there are some problems like how can I change the date format in columnHeader and how can I give fix size to row and columns?

ADyson
  • 57,178
  • 14
  • 51
  • 63
Amol
  • 53
  • 1
  • 8
  • https://fullcalendar.io/docs/slotLabelFormat explains that the slot labels must be some form of time string, so you can't give them arbitrary names like "breakfast", sorry. – ADyson May 31 '18 at 18:59
  • "set the fixed height according to the number of slots" sounds a bit contradictory. If you set a _fixed_ height, then it cant alter according to the number of slots. What do you really mean by this? https://fullcalendar.io/docs/sizing explains the various options for controlling the size of the calendar and the content – ADyson May 31 '18 at 19:00
  • "user can add his/her own slots" users can't normally add their own slots (i.e. they can't alter the times listed on the left hand side), but they can add their own _events_ if you enable it. Is that what you really meant? You _could_ allow users to alter the slot label duration and interval, and even the format, but it's not clear to me what the purpose of that would be, it's just a way of displaying things, it doesn't really turn into actual user-related data. Perhaps you really want users to add their own events, or specify their own time periods via the businessHours setting or something – ADyson May 31 '18 at 19:01
  • @ADyson thank you for your response. I've edited the question to briefly illustrate the problem I am facing in customizing the full calendar plugin. If this plugin doesn't allow us to edit time slots as the arbitrary string, what are the other options? – Amol Jun 01 '18 at 07:12
  • If the exact time of day isn't so important, then have you considered using the calendar in "basic" or even "list" mode? See demo at https://fullcalendar.io/releases/fullcalendar/3.9.0/demos/basic-views.html and https://fullcalendar.io/releases/fullcalendar/3.9.0/demos/list-views.html . The user can add an event to record each meal. The events can be timed, or not (i.e. just marked all-day if the user prefers). This way as well you're not restricting them to just "breakfast", "lunch" and "dinner", instead they can enter as many or as few meals as they have really eaten. – ADyson Jun 01 '18 at 07:40
  • @ADyson Thanks again for your response. I have updated the question again with the updated results. Can you please check? – Amol Jun 01 '18 at 13:39
  • the column header format is not a problem - see https://fullcalendar.io/docs/columnHeaderFormat. As to the equal rows, I don't know how you've made it do it the way it is currently. All I've got is a screenshot, not your implementation, so it's hard to help with that. – ADyson Jun 02 '18 at 10:39
  • Hi, @ADyson I've updated the code as well. – Amol Jun 04 '18 at 05:06
  • As you can see in the first screenshot the columnHeader format is for ex. 'Sun 26' but after the scheduler plugin, the columnHeader format is changed to 'Su 26' you can see that in the last screenshot. – Amol Jun 04 '18 at 05:17
  • Are you using a Timeline view when you use the Scheduler? If so then your issue sounds exactly the same as this question I answered a couple of days ago: https://stackoverflow.com/questions/50635408/fullcalendar-scheduler-columnheaderformat – ADyson Jun 04 '18 at 08:59
  • Thank you so much @ADyson ! using slotLabelFormat did solve the problem of date formatting in column header. Can you please answer my this question too? – Amol Jun 04 '18 at 10:23
  • Not sure you can control the height of the resource rows. They get bigger if there are events in them, depending how much data is in the event description. It's intended to be flexible to deal with the variability of potential data available, and the variability of the size of the user's screen. Why do you think you want a fixed height? – ADyson Jun 04 '18 at 10:37

0 Answers0