Theming multi-day events in the calendar
mdowsett - December 3, 2008 - 18:31
| Project: | Event |
| Version: | 5.x-2.x-dev |
| Component: | User interface |
| Category: | feature request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Description
Is there a way to theme the calendars to have multi-day events' banners span the days in the calendar...so it looks like a multi-day banner rather than repeating the event's info in each day's cell (just like standard desktop calendar programs handle multi-day events).

#1
I am unfortunately now aware of a method to achieve this. I'd very much like to find one, though...
The problem is that the days in the calendar are filled one after another and that the standard calendar uses a html table.
#2
@mdowsett
Nice idea. But wouldn't you get problems with days that have both, multi-day events and single-day events?
Perhaps you could post a screenshot of a calendar with the effect you would like to achieve?
@killes
You could provide a separate class attribute for each multi-day event for each table cell in which it appears, like
<td class="multi_event_1">. That will still leave the problem mentioned above, though.#3
I could add this class, yes. But the actual question is if you can really produce a calendar with events stretching across days in pure html. If anybody could come up with examples, I'd gladly look at them. I am aware of google's calendar, but that one uese JS to do a good part of the formatting. This is not an option in the interest of accessibility.
#4
I figured it'd be a challenge...but if Google can do it, why can't the rest of us! :)
Attached is a screenshot of my iCal. It shows an all day event on the 11th, a timed event on the 13th and an all-day event that goes from the 11th to the 13th.
Thx if you can manage this! It's sure make my calendar less cluttered (also see attached of it's current state). All my events are all day events and 99% of them span more than one day.
http://goflyxc.com/event/2009/01/02
#5
for the time being, if you added solid color backgrounds for the events that span days, it would give you the impression of spanning,
when you contrast it with single day event with white background
How did you add the color bar to each event? Did you make multiple eventtypes (ie cluttering the "add new content" page) or can you differentiate based on taxonomy?
#6
what 'bugs' me is that each event takes up one calender cell worth....if it's like a regular desktop application's calendar, it's one-cell-per-day and then the event 'banners' span the daily cells.
The 'iCal' image is a screen shot of my iCal application (a Mac application). You categorize events manually that get color coded. It has nothing to do with Drupal (but it's how I want it to look).
#7
well how do you wrap the event to a different week in html? its gotta be tabualised somehow in html tables if not div's
http://drupal.org/files/issues/Current%20Cal.png
#8
I have no clue how to do it....that's why I'm posting! :)
#9
what would the js look like to accomplish this? why is that an accessibility issue? can't we have it degrade back to how it looks now (maybe with an extra css class) for users with out javascript?
I'm also looking for a google-calendar-like multi-day event style. Willing to pitch in where I can.
Jen
#10
I agree with you guys. I just came here looking for the same thing. I am on D6 however.
#11
Atrium intranet build on Drupal does that... would also like to know how to achieve this.
Look here: http://farm4.static.flickr.com/3380/3632339609_f12b733b30.jpg
Open Atrium here: http://openatrium.com
#12
I only had a quick look at the code and it seems that they created their own calender module (atrium-1-0-beta-1\sites\all\modules\features\atrium_calendar) with the following dependencies:
dependencies[] = "date"
dependencies[] = "feedapi_node"
dependencies[] = "litecal"
dependencies[] = "node"
dependencies[] = "spaces"
hth
Frank
#13
Has anyone figured out how to use openAtrium's litecal module by itself (so without installing openAtrium or features/context/spaces)?
#14
You can install Atrium's litecal pretty easy. Copy litecal and seed (to have different colors for each event) modules from Atrium.
Then configure 'litecal' view. Choose the node type. Date field has to be called 'field_date'.
Looks real nice. :)
#15
Just curious, can we used the Seed module without installing Context? Will deleting the line dependencies[] = context work? Also, do you know how to get a popup when you click on an event? I remember in openAtrium, when you clicked on an event in the litecal calendar, a really nice popup would show up.
#16
Not sure about dependencies. You can just try it and see what happens. I'm sure seed being an utility module doesn't use context in any great way.
What do you mean by popup? There is a small black block showing up when you hover the event.
#17
yes, exactly. I meant the small black block. Sorry, I should've phrased my words better. Ok, so I have litecal installed (works fine). Going to try using Seed now.
#18
The black block should be there. Don't you have it?
#19
After swithcing to litecal seems like the bars extend 1 day extra, anyone else notice this? For exmple, an event lasting friday and saturday stretches to sunday as well. This happens to all of my nodes
#20
You can also install prepopulate module to get the litecal auto add event feature working. You'll see it on the views admin page under view-style once the prepopulate module is active.