Support for multiple calendarviews like google calendar.

[GoogleCodeExporter]

Hi,

I like the project. The only thing missing for me is the support for
different calendar of different people.

I did some changes on the last build available (r49) to add with the event
an extra option that holds the class where the event belongs to.

Probably not the best solution but it can you get a good start. And maybe
it needs to wait for a better CSS scope as stated in one of the previous
issues.

So lets get started:
* I have added 3 different color classes to CSS file:

  .calen1{background-color:#E268E2}
  .calen1 .time{background-color:#A04BA0;color:#fff;border:1px solid #632E63}
  .calen2{background-color:#63F463}
  .calen2 .time{background-color:#45A845;color:#fff;border:1px solid #235423}
  .calen3{background-color:#E2C183;color:#000}
  .calen3 .time{background-color:#8E7954;color:#fff;border:1px solid #726D63}

* I have changed the following in the JS file:

- (Line 582) changed:
   eventHtml = "<div class=\"" + eventClass + " ui-corner-all\">\
             to:
   eventHtml = "<div class=\"" + eventClass + " ui-corner-all " +
calEvent.calendarClass + "\">\

- (Line 1240) added default value:
   calendarClass: ""

* I have changed the following part of the demo.js to make them visible.

events: [
               { "id": 1, "start": new Date(year, month, day, 12), "end":
new Date(year, month, day, 13, 30), "title": "Lunch with Mike",
calendarClass: 'calen1' },
               { "id": 2, "start": new Date(year, month, day, 14), "end":
new Date(year, month, day, 14, 45), "title": "Dev Meeting", calendarClass:
'calen2' },
               { "id": 3, "start": new Date(year, month, day + 1, 17),
"end": new Date(year, month, day + 1, 17, 45), "title": "Hair cut",
calendarClass: 'calen1' },
               { "id": 4, "start": new Date(year, month, day - 1, 8),
"end": new Date(year, month, day - 1, 9, 30), "title": "Team breakfast",
calendarClass: 'calen2' },
               { "id": 5, "start": new Date(year, month, day + 1, 14),
"end": new Date(year, month, day + 1, 15), "title": "Product showcase",
calendarClass: 'calen3' },
               { "id": 6, "start": new Date(year, month, day, 10), "end":
new Date(year, month, day, 11), "title": "I'm read-only", readOnly: true,
calendarClass: 'calen3' }

            ]

Now these dates will have the colors specified to the css. So with this
option you can state that calen1 belongs to person 1 and etc...

It makes it also easy to hide a calendar.

a link with this small piece of code will do the job:
$('#hcal1').click(function() {
        $('.calen1').hide();
    });

Maybe, haven't tested it, when there are 2 events overlapping and you hide
one of them, it is possible that it stays the same width and doesn't occupy
the free space.

It is drafty and I am new to jquery plugin modifications but I have to
start somewhere, so if I can help you, i would be glad.

Original issue reported on code.google.com by ESTAN...@gmail.com on 11 Aug 2009 at 6:15

[GoogleCodeExporter]

I'm for adding ways to handle multiple calendars. It's there in Google cal and 
in
Ical on MacOS X, TeamAgenda and probably in other calendar applications as well.
But it should not be limited to three calendars. If implemented it must be 
possible
to have any amount of calendars, ways for the user to choose colors and names 
for
each, choice to look an entire calendar to read only etc.
It's more to it than proposed above.

Original comment by jolle.carlestam on 11 Aug 2009 at 9:45

[GoogleCodeExporter]

There's actually a way to do what you're doing with the current codebase. The
eventRender option gives you access to both the calEvent data object and the 
jquery
element that is used to render the calendar event.  So you can just do this if 
you want:

eventRender : function(calEvent, $event) {
    $event.addClass(calEvent.calendarClass);
}

I'm not sure that i'd do it that way exactly myself but it demonstrates the 
capability.

As far as multiple calendars go, you can already do this but it's up to you to 
pull
the data from different places usign the data function option and combining the
results into a single object.  From there give each event the appropriate style 
and
meta-data to determine where it has come from for edits, drags, resizes etc. 

I'm not convinced that this is something that should be built further into the
calendar itself but it sounds like we could certainly benefit from a 
multi-calendar
demo to help people along. Thiings like the implementation of the calendar 
switching,
ala ical, google calendar etc are quite likely things that different apps would 
want
to do differently.

Everything i'm saying about the multi-calendar stuff is theoretical at the 
moment - I
haven't actually implemented it yet but I can't see any reason why it can't be 
done
quite simply. Especially with the recent option for different layouts for 
overlapping
events.

I'll put a task in to put a demo for this together.

One final thing... for these types of posts, would you mind putting them in the
google group to start with as they really need discussion before they become an
enhancement. This way they're more discoverable for other people rather than in 
this
case just being marked as 'won't fix'.

cheers,
rob

Original comment by robmo...@gmail.com on 12 Aug 2009 at 7:42

• Changed state: WontFix