Theming multi-day events in the calendar

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.

@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.

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.

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?

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

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

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

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

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

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

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. :)

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.

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.

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.

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

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

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.

Hi - I installed litecal. The calendar appears, but it isn't populated with any events. I've checked the view - if I change the style to "Html list" - I can see that the title and dates for the event type are returned - so I believe the view is properly configured. I've installed seed and context - but no luck. Any ideas?

- x

I had the same problem. Gave up on litecal and installed Calendar. Then tried litecal again, and it worked.
Perhaps there's an undeclared dependency on Calendar, or Calendar did something to kick-start litecal.

Hi

Thanks alot, guys. It's working fine and looks alot better than normal Drupal Calendar.

There are a few disadvantages or required features in Litecal. I listed below which I came across and please correct if I'm wrong.

-there is no day or week view in Litecal.
-calendar users cannot choose which color to allocate.
-it would be alot nicer if there is a feature like http://arshaw.com/fullcalendar/ which you can drag and drop.

Thanks
Hlan

litecal works great for me too.

Thanks for the pointers !

@developer-x Are you using datestamp for your field_date? I can't seem to get litecal to display any events either although the view is setup just fine.

FYI: The use of JS is not in and of itself an accessibility issue, provided that the JS is accessible. Obviously, for reasons beyond accessibility, any JS enhanced functionality should progressively enhance functionality that already exists.

Make sure that only one of the From and To dates are selected. You should not have two entries fort field_date under Arguments > Date > Fields

I have used this with cck date field.

For anyone reading this that wants the beautiful atrium litecal calendar, here is what you do:

Install Context and Ctools modules

Download and extract Open Atrium http://openatrium.com/download

Find the litecal and seed folders in /profiles/openatrium/custom/ (the seed folder is only for the pretty colors of events on the litecal)

Place them in your Drupal modules directory

Install litecal and seed modules (seed is only if you want colors)

You now have a litecal at yourdomain.com/litecal

If you don't see events:

edit the litecal view and make sure that the filter includes the content types you want in the litecal
make sure the argument is set up for your CCK datefield name (default is field_date)
edit the argument so that only the from date is ticked

I love this calendar.

Seed module breaks my fieldsets on the node-edit form.

I was able to fix my fieldset issues and make this thing a bit more appropriate by chopping the seed.module down so that it ONLY contains the code necessary for the calendar coloring

My entire seed.module file looks like this:

<?php
/**
 * Implementation of hook_theme().
 */
function seed_theme() {
  $path = drupal_get_path('module', 'seed');
  $base = array('file' => 'theme.inc', 'path' => "$path/theme");

  // We need to actually load the theme.inc at time of registry build.
  module_load_include('inc', 'seed', 'theme/theme');

  $items = array(

    'seed_crayon' => $base,
    'seed_crayon_popup' => $base,
    'seed_crayon_swatch' => $base,

  );
  return $items;
}

This removes all other seed functionality. I also deleted the dependencies line from seed.info so that I don't have to install ctools or context.

The litecal module can be downloaded via developmentseed.org website, current version :6.x-1.0-alpha4

And a basic setup tutorial by Thomas Sutton on the passingcuriosity.com website.

Might make things faster!

I'm including a preliminary patch for multi-day theming support in the calendar module. It's not ready for prime time - there is a lot of cleanup required - but for the month view only - it does provide multi-day support. It displays multi-days for events that start and end over two or more days. Events that start/stop on the same day but are repeated are not displayed as multi-day.

If you are interested, please deploy the patch and test it out. Please report and problems or issues with this. Thanks.

To patch, copy the patch file into the module/calendar directory and issue : patch -p0 < calendar-multi-day.patch

This patch is only for the 6.x-2.2 version of Calendar.

- x

This version fixes layout issues for ie6/ie7/ie8 - also a bug fix regarding the order of the multi-day events. Don't apply the patch in #32

- x

Hi,

Here is a complete patch. It provides the following:

1. Multi-day layout for month and week view
2. A new option in the Views style options for month & week views to enable/disable multi-day support
3. Restyled layout of month & week calendar to give the calendar a lighter look - it's looks more like google or litecal

Additionally, I've tested against as many use cases as possible - I've gone through all the options for the week and month view options - and verified that the patch supports/doesn't break them. I've run it through the coder module - and I haven't added any complaints. Additionally, tested on ie6/ie7/ie8/ff/safari/chrome/opera.

This patch introduces two new tpl files - so if applying, you may need to clear the cache (not totally sure about this - if someone can provide clarity regarding template caching, that would be great).

If anyone can apply this patch and provide some additional testing - I would appreciate it.

- x

Screenshots :
http://www.okeel.com/sites/okeel.com/files/multi-day.png
http://www.okeel.com/sites/okeel.com/files/multi-day-week.png

Realized that I should be posting this patch to the calendar project. Created an issue in the calendar project for this patch http://drupal.org/node/931392

Event for Drupal 8 is unrelated to older versions. If an issue similar to this one exists, please open a new issue with the 8.x branch.