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

killes@www.drop.org - December 4, 2008 - 09:51

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

Frank Ralf - December 4, 2008 - 11:04

@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

killes@www.drop.org - December 4, 2008 - 12:26

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

mdowsett - December 18, 2008 - 19:50

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

AttachmentSize
iCal.png 11.58 KB
Current Cal.png 141.16 KB

#5

chasz - December 26, 2008 - 13:57

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

mdowsett - December 29, 2008 - 16:33

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

chasz - December 29, 2008 - 17:57

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

mdowsett - December 29, 2008 - 18:16

I have no clue how to do it....that's why I'm posting! :)

#9

jenlampton - June 12, 2009 - 08:00

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

nicholas.alipaz - June 29, 2009 - 00:44

I agree with you guys. I just came here looking for the same thing. I am on D6 however.

#11

onisho - July 20, 2009 - 12:07

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

Frank Ralf - July 21, 2009 - 07:44

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

Janam - August 5, 2009 - 21:25

Has anyone figured out how to use openAtrium's litecal module by itself (so without installing openAtrium or features/context/spaces)?

#14

mike-green - August 15, 2009 - 11:30

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

Janam - August 15, 2009 - 12:14

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

mike-green - August 16, 2009 - 20:19

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

Janam - August 17, 2009 - 05:53

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

mike-green - August 17, 2009 - 06:36

The black block should be there. Don't you have it?

#19

j0k3z - August 18, 2009 - 00:16

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

droweski - October 15, 2009 - 04:00

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.

 
 

Drupal is a registered trademark of Dries Buytaert.