CODEWITHSUNDEEP
javascriptjqueryfullcalendar
PinoyStackOverflower
PinoyStackOverflower

Reputation: 5302

Modify FullCalendar Javascript Plugin Layout

As you can see the default layout of FullCalendar is like this enter image description here

I want to change it to be like this enter image description here

That Room Column is something that is custom or shall I say, it came from the database, that wouldn't be important for now since what I really wanted to know is how to achieve that kind of layout.

I honestly do not know where to start that's why I run here in SO. I've been looking some examples in the internet but can't find anything.

How would I start in doing that kind of layout? Your help will be greatly appreciated!

Thank you very much!

Upvotes: 0

Views: 1352

Answers (2)

PinoyStackOverflower
PinoyStackOverflower

Reputation: 5302

Just a heads up. I managed to solved this one when doing some thorough research. I found that someone already developed this kind of solution. First I found this link here in SO: fullcalendar change columns to row

Then upon reading the comments, it lead me to here http://tux.fi/~jarnok/fullcalendar-resourceviews/

It just needs a little tweaking of course, but this would do.

I hope this helps someone.

Cheers!

Upvotes: 1

john 4d5
john 4d5

Reputation: 741

I think that FullCalendar does not offer this flexibility by customizing it. You will find better solutions by extending or modifying the lib, but a solution without modifications may be:

  1. Your 'relative view' should be a 'week view', then you will have your week days displayed (as you need).
  2. Set the 'select function' to always set 'allDay' to 'true'. At this point you will have what you need, but just for one room/row.
  3. Turn each room (row) into a new FullCalendar.
  4. Modify the CSS (overwrite) as you need.

Upvotes: 1

Related Questions