How do I change the width of the Events calendar?

By turtle182 on 15 Aug 2005 at 21:45 UTC

I've installed the Events module and I've been having trouble making things fit in my site. I've made a fixed width template, but the calendar pushes my left menu out too far. I tried changing the width of the event-calendar class in event.css file but it doesn't seem to have any effect.

Also, I'd like the text in the day-view of an event not extend beyond the bounds of the event box. I've managed to get this width set but the text keeps going well beyond the edge of the page confines.

Any advice would be greatly appreciated.

You can view the site at http://www.plymouth-nh.org and click on the event for August 29 to see what I'm writing about.

Comments

random

sepeck commented 15 August 2005 at 21:51

I can't remember now, but isn't there a css setting that will force text to 'wrap' within a css box?

My book is at home, so hopefully someone else will speak up before I get off work

-sp
---------
Test sites and good habits: Drupal Best Practices Guide.
Misc Black Mountain

-Steven Peck
---------
Test site, always start with a test site.
_{Drupal Best Practices Guide}

Wide Event

Alaska commented 16 August 2005 at 01:19

From what I can tell it looks like the P tag is extending beyond its container. One test that you could do would be to define the P tag as to width just to see if it would work by adding it to your CSS.

p { 
width: 200px;
color: red;
}

The additional color is just a check to make sure that something happens and should be removed once it works.

Of course this will change all of the P tags. It looks like event dayview p may work to limit the width to only that p tag, maybe.

.event .dayview p { 
width: 200px;
color: red;
}

or you can try and add a width to this event.css style and see what happens.

.event-calendar .content {
  margin: 5px;
  padding: 3px;
  border-left: solid 2px #ddd;
  padding-left: 5px;
}

Let me know if you find a solution as I have not tested this possibility.

Jim

No Such Luck

turtle182 commented 17 August 2005 at 00:15

Thanks for the suggestion, Jim, but none of these seemed to do the trick. As far as I can tell the trouble has to be with the Event module because When I get the preview on adding the item, it all wraps just fine. I even tried changing the CSS for the flexinode-textarea-3 div that it is put into, but that didn't solve the trouble.

The color of the text changes just as it should, but still I get the overflow issues.

Calendar Width

turtle182 commented 17 August 2005 at 00:32

I still can't get the actual calendar in the left sidebar to resize, either. Hasn't anyone used the Events calendar and resized it? This seems like such a simple thing to want to accomplish yet I seem to finding no simple way to do this.

Width of Calendar

Alaska commented 17 August 2005 at 02:58

I assume that you are using the event module for your theme to add the calendar of events. If so, I had removed the CSS file for that module as a test and found that I liked it better without the added event.css file.

Go to modules > event > event.css and just rename the file to perhaps event_org.css. That will take it out so that it can be replaced once you see if its removal is a plus or a minus. If nothing good happens just rename to event.css and life will go on as usual. If it does make a positive change, then put in a blank event.css file to keep the Drupal log happy as it will log the missing event.css file.

Can't say if this will solve you issue, but it will tell you if event.css has any effect on your line length.

One other thing to consider is that in some cases certain themes have CSS that will override event.css. Just one more thing to think about!

Jim

webdeveloper toolbar

sepeck commented 17 August 2005 at 03:39

Get the webdeveloper toolbar for Firfox.

It shows your calender in the sidebar are controlled by

Style Information - http://www.plymouth-nh.org/
http://www.plymouth-nh.org/misc/drupal.css

th    (line 24)
{
    text-align: left;
    padding-right-value: 1em;
    padding-right-ltr-source: physical;
    padding-right-rtl-source: physical;
    border-bottom-width: 3px;
    border-bottom-style: solid;
    border-bottom-color: rgb(204, 204, 204);
    white-space: nowrap;
}


http://www.plymouth-nh.org/modules/event/event.css

.event-calendar th    (line 14)
{
    color: rgb(0, 0, 0);
    background-color: rgb(170, 170, 204);
    background-image: none;
    background-repeat: repeat;
    background-attachment: scroll;
    -x-background-x-position: 0%;
    -x-background-y-position: 0%;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    font-size: 120%;
    text-align: center;
    padding-top: 1px;
    padding-right-value: 0.33em;
    padding-bottom: 1px;
    padding-left-value: 0.33em;
    padding-left-ltr-source: physical;
    padding-left-rtl-source: physical;
    padding-right-ltr-source: physical;
    padding-right-rtl-source: physical;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: rgb(34, 68, 34);
    border-right-color: rgb(34, 68, 34);
    border-bottom-color: rgb(34, 68, 34);
    border-left-color: rgb(34, 68, 34);
}

.event-calendar th.prev    (line 33)
{
    text-align: left;
    border-top-width: 1px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 1px;
}

-sp
---------
Drupal Best Practices Guide - My stuff Black Mountain

-Steven Peck
---------
Test site, always start with a test site.
_{Drupal Best Practices Guide}

Fixed Calendar Width but not Event Width

turtle182 commented 18 August 2005 at 18:23

Thanks to bomarmonk, I was able to finally get the calendar width under control. The trouble was the day headers themselves. The Sun, Mon, Tue, Wed, etc. abbreviations were preventing the table from getting any smaller. The solution I used was identical to his: reduce these header abbreviations even further to S, M, T, W, etc.

I still have an issue with the text from the event in the dayview overflowing. Upon further examination I found that the title for the event didn't overflow but in fact wrapped. It seems that only the custom fields created using flexinode (I created a new content type called Events for calendar inclusion only) were the source of the problem.

<div class="content"><div class="flexinode-body flexinode-1"><div class="flexinode-textfield-2"><div class="form-item">

 <label>Location:</label><br>
 Town Hall
</div>
</div><div class="flexinode-textfield-4"><div class="form-item">
 <label>Event Description:</label><br>
 Regular Selectboard meeting. The above meeting date is scheduled in advance and may be changed by the Selectboard as needed.
</div>
</div></div></div>

I tried creating custom CSS in event.css for these divs but nothing worked.

Any suggestions?

Forget it

turtle182 commented 18 August 2005 at 18:59

I decided it's really not worth the headache to have the additional information in the teaser. I've disabled showing the info in the teaser. Visitors will just have to click on the link for the event itself to find out more information.

how did you make this change ?

siteboy commented 15 September 2005 at 11:20

I've looked through (some) of the events code and can't find where to change mon to m. Could you share how you managed this.

thanks

Here's the code to change...

turtle182 commented 15 September 2005 at 13:56

I'd be glad to share! Open events.module and look for (around line 1134):

function event_week_days() {
  static $weekdays;

  if (!$weekdays) {
    if (variable_get('date_first_day', 1)) {
      $weekdays = array(array('day' => 'Mon', 't' => t('Mon')), array('day' => 'Tue', 't' => t('Tue')), array('day' => 'Wed', 't' => t('Wed')), array('day' => 'Thu', 't' => t('Thu')), array('day' => 'Fri', 't' => t('Fri')), array('day' => 'Sat', 't' => t('Sat')), array('day' => 'Sun', 't' => t('Sun')));
    }
    else {
      $weekdays = array(array('day' => 'Sun', 't' => t('Sun')), array('day' => 'Mon', 't' => t('Mon')), array('day' => 'Tue', 't' => t('Tue')), array('day' => 'Wed', 't' => t('Wed')), array('day' => 'Thu', 't' => t('Thu')), array('day' => 'Fri', 't' => t('Fri')), array('day' => 'Sat', 't' => t('Sat')));
    }
  }
  return $weekdays;
}

Change this code to:

function event_week_days() {
  static $weekdays;

  if (!$weekdays) {
    if (variable_get('date_first_day', 1)) {
      $weekdays = array(array('day' => 'M', 't' => t('M')), array('day' => 'T', 't' => t('T')), array('day' => 'W', 't' => t('W')), array('day' => 'T', 't' => t('T')), array('day' => 'F', 't' => t('F')), array('day' => 'S', 't' => t('S')), array('day' => 'S', 't' => t('S')));
    }
    else {
      $weekdays = array(array('day' => 'S', 't' => t('S')), array('day' => 'M', 't' => t('M')), array('day' => 'T', 't' => t('T')), array('day' => 'W', 't' => t('W')), array('day' => 'T', 't' => t('T')), array('day' => 'F', 't' => t('F')), array('day' => 'S', 't' => t('S')));
    }
  }
  return $weekdays;
}

Obviously make sure the really long lines remain one line. Essentially what you're doing is going through and replacing all the Mon, Tue, Wed, etc. with the first letter of each or whatever you prefer. This or shrinking the font size are the only ways I know to reduce the width of the Events calendar block.

it's so easy

igulinda79 commented 5 February 2006 at 18:20

srturtle!
thanks for good idea!its for me the best way to change width of the events calendar.

This change worked for me.

Sync commented 18 February 2006 at 19:22

I did not have an issue with the event calendar when using the Bluemarine theme; however, I recently changed to Sands and the calendar width became wider that the column that was supposed to contain it. Using the above-posted solution solved the problem. Additionally, I was able to use the abbreviations: M, T, W, Th, F, S, Su for Monday through Sunday, respectively. This keeps me from confusing Tuesdays and Thursdays and Saturdays and Sundays. ;-)

Change event.css too

eggsurplus commented 27 March 2007 at 14:16

If you make this change don't forget to add td.s to event.css so that the weekends still display the background color:

.event-calendar td.sat, .event-calendar td.sun, .event-calendar td.s {
background: #fdd;
}

work around for 5.x

tjerah commented 22 November 2007 at 10:02

For drupal 5.x, you can add this snippet to your template.php:

function yourThemeName_event_calendar_month($op, $header, $rows, $attributes = array(), $caption = NULL) {
  foreach($header as $key => $values) { $header[$key]['data'] = substr($values['data'],0,1); }
  $output = theme("table", $header, $rows, $attributes, $caption);
  return '<div class="event-calendar"><div class="month-view">'. $output ."</div></div>\n";
}

If you want to show the abbreviations only in block, customize it with:

function yourThemeName...
  if ($op == 'block') {
    foreach($header...
    ...
  }
}

Regards,

Leo

Here is the solution to a

venkat-rk commented 15 September 2005 at 11:37

Here is the solution to a somewhat similar problem that someone had with text wrapping in day view of the calendar. Might give you some pointers:
http://drupal.org/node/27012#comment-53494

Thanks!

turtle182 commented 15 September 2005 at 13:50

Thanks for the pointer! I'll try it out later and let everyone know how it worked.

Nope

turtle182 commented 15 September 2005 at 14:14

This didn't work for me, unfortunately. Still not wrapping.

here's a fix for day view.

heather commented 19 September 2005 at 11:08

i put this in the 'issues' area.. i dunno how to get the attention of a developer who can fix the code...

problem: the event day view does not wrap the text.

why: this is due to the prescence of the form-item class, which in the drupal.css has the attirbute: white-space:nowrap;

fix: therefore, by adding this below at the end of the event.css stylesheet, this solves the problem. i've nested the classes, so it should only affect the event module.

.event div.form-item {
white-space: normal !important;
}

bon chance!

filing

sepeck commented 19 September 2005 at 17:25

an issue against the project is how to get the attention of the module developer. :)

-sp
---------
Test site, always start with a test site.
Drupal Best Practices Guide -|- Black Mountain

-Steven Peck
---------
Test site, always start with a test site.
_{Drupal Best Practices Guide}

You can file an issue

venkat-rk commented 21 September 2005 at 11:51

You can file an issue here:
http://drupal.org/project/issues

You need to select the appropriate module from the first drop-down list.

yep, did that

heather commented 22 September 2005 at 12:09

on 12 sep.
http://drupal.org/node/30990

i'm sure someone will work it in eventually.

Yeah, I tried that and still

turtle182 commented 22 September 2005 at 14:27

Yeah, I tried that and still the text did not wrap. Oh well. I've just gotten rid of any teaser on the event.

I have to admit I'm getting very discouraged with Drupal. It's great if you want a blog, but if you want a real site with sensical organization, it's really not that great. It's too much work for something that really only fulfills a niche: blog sites.

Now if only Mambo had granular user management, I'd use that instead. :(

Don't be discouraged. The

venkat-rk commented 24 September 2005 at 08:18

Don't be discouraged. The following thread gives you excellent ideas on how to set up a typical site with drupal:
http://drupal.org/node/31896

Reducing cell padding via CSS

Samat Jain commented 28 February 2006 at 01:08

An approach I used in trying to make Sands work with the event module calendar block is adjusting the padding of the table cells. Place in some convenient CSS file:

.event-calendar td,
.event-calendar th
{
  padding: 0.2ex 0 !important;
}
.block-event .event-calendar a
{
  display: block;
}

The first rule reduces the padding on the table elements. The optional second rule makes any links in these elements blocks so they expand to fill their container. This is nice, as since they are smaller they are now also easier to click.

This may not work universally but it works for me.
__
Personal home page | Rhombic Networks: Drupal-friendly web hosting

Gracious!

sonden commented 15 March 2008 at 13:57

After having tried all the other solutions this finally worked for me! Thanks so much !

Add Style Selector

cchrysostom commented 2 May 2006 at 00:32

I had the same problem using a fixed-column-width for blocks. My solution was to add the following to event.css right after the .event-calendar td.days selector:

.block-event td.days {
  font-size: xx-small;
}

This allowed the font for the days header to remain normal in areas outside of a block.

CSS Change

lanesharon commented 14 May 2006 at 02:08

That did the trick. Thanks!!
Take Care, Sharon

resizing the "calendar to browse events" block for fixed width

cookiesunshinex commented 27 March 2007 at 17:49

This method worked and this is one of the best discussion threads I've found as far as completing a site from scratch with not alot of drupal experience. The oversized "mini-calendar" with a fixed width theme was a real stumbling block.

Almost all themes that I chose had this issue, so I sat out to try and fix this. I personally believe that the events.css might have a couple of bugs in it, because I couldn't get much change to happen by modifying .event-calendar td.days or .block-event-0 th.days

I ended up eventually adding this code:

#block-event-0 th.sun, #block-event-0 th.sat, #block-event-0 th.mon, #block-event-0 th.tue, #block-event-0 th.wed, #block-event-0 th.thu, #block-event-0 th.fri { color: black; font-size: xx-small; background-color: #aaaacc; }

Unfortunately, this code DID NOT work.

.block-event td.days {
  font-size: xx-small;
}

This code also DID NOT work

.block-event th.days {
  font-size: xx-small;
}

For some unknown reason, I had to specify #block-event-0 instead of #block-event and I also have to specify th.sat, th.sun, etc. instead of just th.days to get it to work.

Thanks for the great tip, now I can move along with my drupal community portal site.

success at last

offal commented 15 July 2007 at 13:30

Thanks cookiesunshinex, your code worked for me, and like you, I found that the other two you listed did not work.

Just pasted the code to the bottom of the event.css and bingo!

#block-event-0 th.sun, #block-event-0 th.sat, #block-event-0 th.mon, #block-event-0 th.tue, #block-event-0 th.wed, #block-event-0 th.thu, #block-event-0 th.fri { color: black; font-size: xx-small; background-color: #aaaacc; }

Code snippet for 5.x

rlnorthcutt

he/him

commented 8 December 2007 at 00:19

Leo (tjerah) above gave some code that will help you selectively reduce the day name to a single letter on the block only (M instead of Mon). However, it "broke" the regular full month view. Here is the full code snippet to add to your template.php file to autochange the day name on the block view (replace yourThemeName with your theme name ;)

// ***** This is a custom function to reduce the size of the month block in order to fit in IE   ****
function youtThemeName_event_calendar_month($op, $header, $rows, $attributes = array(), $caption = NULL) {
  if ($op == 'block') {
    foreach($header as $key => $values) { $header[$key]['data'] = substr($values['data'],0,1); }
    $output = theme("table", $header, $rows, $attributes, $caption);
    return '<div class="event-calendar"><div class="month-view">'. $output ."</div></div>\n";
  }
  else
  {
  $output = theme("table", $header, $rows, $attributes, $caption);
    return '<div class="event-calendar"><div class="month-view">'. $output ."</div></div>\n";
  }
}

Thanks Leo - this is certainly an example of standing on the shoulders of giants. I couldn't have done it without you.

regards,
Ron

regards,
Ron Northcutt
Directory of Technical Marketing, Acquia

Thanks

billl4 commented 11 February 2008 at 00:45

Thanks rlnorthcutt. It worked for me. I just had to add */ above the function to make it work. I'm a newbie and I'm not sure why I had to do that (to close the comment?), but I noticed it on the others comments in my template.php file (zen template).

// ***** This is a custom function to reduce the size of the month block in order to fit in IE   ****
*/
function zen_event_calendar_month($op, $header, $rows, $attributes = array(), $caption = NULL) {
  if ($op == 'block') {
    foreach($header as $key => $values) { $header[$key]['data'] = substr($values['data'],0,1); }
    $output = theme("table", $header, $rows, $attributes, $caption);
    return '<div class="event-calendar"><div class="month-view">'. $output ."</div></div>\n";
  }
  else
  {
  $output = theme("table", $header, $rows, $attributes, $caption);
    return '<div class="event-calendar"><div class="month-view">'. $output ."</div></div>\n";
  }
}

How do I change the width of the Events calendar?

Comments

random

Wide Event

No Such Luck

Calendar Width

Width of Calendar

webdeveloper toolbar

Fixed Calendar Width but not Event Width

Forget it

how did you make this change ?

Here's the code to change...

it's so easy

This change worked for me.

Change event.css too

work around for 5.x

Here is the solution to a

Thanks!

Nope

here's a fix for day view.

filing

You can file an issue

yep, did that

Yeah, I tried that and still

Don't be discouraged. The

Reducing cell padding via CSS

Gracious!

Add Style Selector

CSS Change

resizing the "calendar to browse events" block for fixed width

success at last

See also...

Code snippet for 5.x

Thanks

New forum topics

News items

Our community

Documentation

Drupal code base

Governance of community