Topic: Full-calendar event not showing properly. How to fix?
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
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
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 6 years ago
why do you think this plugin is broken?
cfo64nc pro commented 6 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.
cfo64nc pro commented 6 years ago
I would appreciate a workaround/fix for this issue, since having different colored events is important to my application.
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 commented 5 years ago
This method doesn't work. Just colors the outer edge of the event.
Piotr Glejzer staff commented 5 years ago
Hi,
Which version of MDB do you use?
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 6 years ago
Thanks for you suggest, we will fix this as soon as possible. Have a nice day!
cfo64nc pro commented 6 years ago
You're welcome!
assoumouad@gmail.com pro premium commented 5 years ago
One year ago... still waiting for theme and event color change...
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No