FullCalendar events wrong size very frustruating

Question

I have a problem with full calendar.

If you look the first attachment you'll see my event but it size is very small. In the second attachment you'll see a month view and here the event have the good size.

It's seems to work on every view exept on timeline view !

I use Jquery 3.1.1 , I test on 3.2.1.

How can I fix this ?

     $('#calendar').fullCalendar({

        ////  Generals parameters of scheduler. ////
        schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source', // Licence key
        defaultView: 'timeline',
        title: true,
        header: {
            left: 'prev, month',        //
            center: 'title today',      // Buttons header.
            right: 'timeline next'      //
        },
        locale: 'fr',
        defaultDate: moment().startOf("month").startOf("isoweek"), // Defined first day of week.
        duration: { days: 2 }, // Number of days displayed.
        height: 'auto', // Height of scheduler. auto : grown according to the number of resources.
        nowIndicator: true, // Day indicator.
        slotLabelFormat: 'dddd DD', // Day format in columns.
        slotLabelInterval:'24:00',

        ////  Resources => left column.   ////
        resourceLabelText: 'Familles',
        resourceGroupField: 'NameFamily',
        resourceAreaWidth: "15%",
        resources: @Html.Raw(ViewBag.Ressources), // Alimentaiton des chambres par famille.

        events: @Html.Raw(ViewBag.Events), // Alimentation des événements.

        slotDuration: { days: 1 },
        timeFormat: 'H:mm',// Split cell by two cases.
        snapDuration: '01:00:00',
        aspectRatio: 2,
        slotWidth: '45',
        defaultDate: new Date(), // Place le planning à la date du jour.

    });

My ressources :

resources: [
        { id: 'a', title: 'Auditorium A' },
        { id: 'b', title: 'Auditorium B', eventColor: 'green' },
        { id: 'c', title: 'Auditorium C', eventColor: 'orange' },
        {
            id: 'd', title: 'Auditorium D', children: [
                { id: 'd1', title: 'Room D1' },
                { id: 'd2', title: 'Room D2' }
            ]
        },
        { id: 'e', title: 'Auditorium E' },
        { id: 'f', title: 'Auditorium F', eventColor: 'red' },
        { id: 'g', title: 'Auditorium G' },
        { id: 'h', title: 'Auditorium H' },
        { id: 'i', title: 'Auditorium I' },
        { id: 'j', title: 'Auditorium J' },
        { id: 'k', title: 'Auditorium K' },
        { id: 'l', title: 'Auditorium L' },
        { id: 'm', title: 'Auditorium M' },
        { id: 'n', title: 'Auditorium N' },
        { id: 'o', title: 'Auditorium O' },
        { id: 'p', title: 'Auditorium P' },
        { id: 'q', title: 'Auditorium Q' },
        { id: 'r', title: 'Auditorium R' },
        { id: 's', title: 'Auditorium S' },
        { id: 't', title: 'Auditorium T' },
        { id: 'u', title: 'Auditorium U' },
        { id: 'v', title: 'Auditorium V' },
        { id: 'w', title: 'Auditorium W' },
        { id: 'x', title: 'Auditorium X' },
        { id: 'y', title: 'Auditorium Y' },
        { id: 'z', title: 'Auditorium Z' }
    ],
    events: [
        { id: '1', resourceId: 'b', start: '2019-01-03T02:00:00', end: '2019-01-03T07:00:00', title: 'event 1' },
        { id: '2', resourceId: 'c', start: '2019-01-03T05:00:00', end: '2019-01-03T22:00:00', title: 'event 2' },
        { id: '3', resourceId: 'd', start: '2019-01-02', end: '2019-01-04', title: 'event 3' },
        { id: '4', resourceId: 'e', start: '2019-01-03T03:00:00', end: '2019-01-03T08:00:00', title: 'event 4' },
        { id: '5', resourceId: 'f', start: '2019-01-03T00:30:00', end: '2019-01-03T02:30:00', title: 'event 5' }
    ],

[link](https://imgur.com/isvRQf6) Image 2 [link](https://imgur.com/9JZvT9z) Image 1 — Julien Breton, Jan 15 '19 at 09:15
Please add your pictures to the question itself - use the "edit" button to change the question details. Thanks. — ADyson, Jan 15 '19 at 09:33
And can you please also share the JSON for your events and resources. Then we can have a complete example which reproduces your problem. Thanks. — ADyson, Jan 15 '19 at 09:34
Again as I requested can you please edit the question further to share both the event and resource data which you're testing with, so that we can reproduce the problem. (Posting it in the "answers" section is not appropriate, as it doesn't answer the question. The moderators will probably remove it). Thankyou. — ADyson, Jan 15 '19 at 10:00
P.S. you appear to have defined `defaultDate` twice, which isn't going to be helpful. Which definition is correct? — ADyson, Jan 15 '19 at 10:07
done , the correct date is " defaultDate: moment().startOf("month").startOf("isoweek") " — Julien Breton, Jan 15 '19 at 10:10
Ok thanks. Now the next problem is that your screenshot does not appear to match with your example data. In the screenshot you have an event which appears to start on Jan 13, but in your example data there is no such event. I cannot use your example data to demonstrate the problem shown in the screenshot. Everything appears to display correctly as per the data provided. See the demo at http://jsfiddle.net/fu7o09j1/ This is using the latest fullCalendar and Scheduler versions, and compatible versions of jQuery and momentJS. — ADyson, Jan 15 '19 at 10:16
If i make a new view with a copy of your jsfiddle. It the same problem. Little events in timeline , normal in other. Css problems ? — Julien Breton, Jan 15 '19 at 10:20
if you made any changes to the fullCalendar or scheduler CSS, or have any other CSS in the page which might cause a conflict (either with element types or class names) then yes potentially. The browser's element inspector should be able to tell you what rules are being applied to an element and where they came from - e.g. if you right-click on the event and inspect it you can see that in the Dev tools. I would first suggest to remove all CSS except the fullCalendar and scheduler ones, and see if you have the same issue in the calendar. — ADyson, Jan 15 '19 at 10:23

FullCalendar events wrong size very frustruating

0 Answers0