Full-calendar event not showing properly. How to fix?

Topic: Full-calendar event not showing properly. How to fix?

Dave pro asked 6 years ago

Hi,

I've recently added full-calendar to my website and noticed that the events are not shown correctly. for example: if the event is from 7:00AM till 11:30AM it will not show the full event length. Instead the length of the event stops at the end of the event's title. Resizing the event will not change the length (visually). Also, changing an individual event's color property is not possible. However changing it for all of them works.

The code I used is from the calendar example of the MDB admin template (pro). I was confused that the events weren't shown properly, so I checked the live preview of DMB the full-calendar and turns out its not working there either. However, if you see the example of "https://fullcalendar.io/" the events are shown properly. I think there's something wrong with the CSS and Javascript

I look forward to a reply.

Best regards,
Dave

Add comment

cfo64nc pro answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

Please see the example at https://fullcalendar.io/docs/event-colors-demo. It doesn't modify any css.

Your workaround solves my problem, but it's a kludge! That is my point. MDB took a working library and broke it, removed functionality, whatever you want to call it.

I'm not an expert in css or javascript. I've barely touched the surface, but I recognize kludges when I see them. I've been coding for over 40 years. I buy software when I don't want to waste my time developing it. Unfortunately, that's all I've been doing using your Plug-in.

Piotr Glejzer staff commented 5 years ago

Thanks for you suggest, we will fix this as soon as possible. Have a nice day!

cfo64nc pro commented 5 years ago

You're welcome!

assoumouad premium commented 3 years ago

One year ago... still waiting for theme and event color change...

Add comment

Piotr Glejzer staff answered 5 years ago

0 0 Best answer

So you have to go to fullcalendar.min.css and comment every color what you want and you can style your calendar through JavaScript code like as I said 1-month ago. 
<a href="https://ibb.co/y5YVzCR" target="_blank" rel="nofollow">https://ibb.co/y5YVzCR</a> -- colors of calendar 
<a href="https://ibb.co/61RWYyv" target="_blank" rel="nofollow">https://ibb.co/61RWYyv</a> -- .fc-content and other in fullcalendar.min.css

<pre class="prettyprint"><code>$(document).ready(function () {
 $('#calendar').fullCalendar({
 header: {
 left: 'prev,next today',
 center: 'title',
 right: 'month,agendaWeek,agendaDay,listWeek'
 },
 defaultDate: '2018-11-16',
 navLinks: true, // can click day/week names to navigate views
 eventLimit: true, // allow "more" link when too many events
 events: [{
 title: 'Front-End Conference',
 start: '2018-11-16',
 end: '2018-11-18',
 textColor: 'rgba(255,255,255,.5)',
 backgroundColor: 'rgba(241,155,55.5)'
 },
 {
 title: 'Hair stylist with Mike',
 start: '2018-11-20',
 allDay: true,
 textColor: 'rgba(0,0,255,.5)',
 backgroundColor: 'rgba(0,0,0,.5)'
 },
 {
 title: 'Car mechanic',
 start: '2018-11-14T09:00:00',
 end: '2018-11-14T11:00:00',
 textColor: 'red',
 backgroundColor: 'rgba(0,0,0,.8)'
 },
 {
 title: 'Dinner with Mike',
 start: '2018-11-21T19:00:00',
 end: '2018-11-21T22:00:00',
 textColor: 'blue',
 backgroundColor: 'rgba(0,255,0,.6)'
 },
 {
 title: 'Chillout',
 start: '2018-11-15',
 allDay: true,
 textColor: 'brown',
 backgroundColor: 'green'
 },
 {
 title: 'Vacation',
 start: '2018-11-23',
 end: '2018-11-29',
 textColor: 'yellow',
 backgroundColor: 'rgba(0,0,0,.4)'
 },
 ]
 })
});
</code></pre>

If you want to have everything in mdb.css you have to use gulp to compile full-calendar.scss where is in scss folder and compiled and minified to mdb.css.

Please insert min. 20 characters.

So you have to go to fullcalendar.min.css and comment every color what you want and you can style your calendar through JavaScript code like as I said 1-month ago.
https://ibb.co/y5YVzCR -- colors of calendar
https://ibb.co/61RWYyv -- .fc-content and other in fullcalendar.min.css

$(document).ready(function () {
  $('#calendar').fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay,listWeek'
    },
    defaultDate: '2018-11-16',
    navLinks: true, // can click day/week names to navigate views
    eventLimit: true, // allow "more" link when too many events
    events: [{
        title: 'Front-End Conference',
        start: '2018-11-16',
        end: '2018-11-18',
        textColor: 'rgba(255,255,255,.5)',
        backgroundColor: 'rgba(241,155,55.5)'
      },
      {
        title: 'Hair stylist with Mike',
        start: '2018-11-20',
        allDay: true,
        textColor: 'rgba(0,0,255,.5)',
        backgroundColor: 'rgba(0,0,0,.5)'
      },
      {
        title: 'Car mechanic',
        start: '2018-11-14T09:00:00',
        end: '2018-11-14T11:00:00',
        textColor: 'red',
        backgroundColor: 'rgba(0,0,0,.8)'
      },
      {
        title: 'Dinner with Mike',
        start: '2018-11-21T19:00:00',
        end: '2018-11-21T22:00:00',
        textColor: 'blue',
        backgroundColor: 'rgba(0,255,0,.6)'
      },
      {
        title: 'Chillout',
        start: '2018-11-15',
        allDay: true,
        textColor: 'brown',
        backgroundColor: 'green'
      },
      {
        title: 'Vacation',
        start: '2018-11-23',
        end: '2018-11-29',
        textColor: 'yellow',
        backgroundColor: 'rgba(0,0,0,.4)'
      },
    ]
  })
});

If you want to have everything in mdb.css you have to use gulp to compile full-calendar.scss where is in scss folder and compiled and minified to mdb.css.

nathanjenkins free commented 4 years ago

This method doesn't work. Just colors the outer edge of the event.

Piotr Glejzer staff commented 4 years ago

Hi,

Which version of MDB do you use?

Add comment

cfo64nc pro answered 5 years ago

0 0 Best answer

So, we paid $9 for a broken version of fullcalendar.js. Nice! Could you please explain moving fc* into mdb.css when full calendar has it's own css file?. Just curious.

Piotr Glejzer staff commented 5 years ago

why do you think this plugin is broken?

cfo64nc pro commented 5 years ago

because I can't change the colors of my events. I bought the plug-in from you guys because I thought you would have added functionality to it, not removed functionality.I bought the all-plugins-pack which includes the Fullcalendar code.

There is no .fc .fc-content in mdb.css and I only have fullcalendar.min.css included with the package.

$ find . -name fullcalendar*

./css/addons/fullcalendar.min.css

./js/addons/fullcalendar.min.js

So I can't even change it if I wanted to.

I wasted a lot of time yesterday trying to troubleshoot the issue only to find that you guys modified the functionality of the library in a negative way. I'm very disappointed.

Please insert min. 15 characters.

cfo64nc pro commented 5 years ago

I would appreciate a workaround/fix for this issue, since having different colored events is important to my application.

Add comment

Piotr Glejzer staff answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

Hi,
yes, it is possible. If you are using our admin template you have to remove or use comments to background color and text at mdb.css or in admin/_style.scss and compile to mdb.css.

  .fc .fc-content {
   /* background-color: #4fc3f7; */
    padding: 2px;
 /*    color: #fff; ; */

}

and If you will do that you can add js to code to events like that and it will be work.

    events: [{
        title: 'All Day Event',
        start: '2019-03-01',
        textColor: 'red',
        backgroundColor: 'black'
      },
      {
        title: 'Long Event',
        start: '2019-03-07',
        end: '2019-03-10',
        textColor: 'yellow',
        backgroundColor: 'blue'
      },
      {
        id: 999,
        title: 'Repeating Event',
        start: '2019-03-09T16:00:00',
        textColor: 'rgba(255,255,1)',
        backgroundColor: '#000'
      }]

Best,
Piotr

Add comment

andrew3 priority answered 5 years ago