Sharepoint Forum

 
Home » Forum » Sharepoint       Ask a questionRSS Feeds

Calendar CSS

  Asked By: Nadia Alvarado         Date: Mar 10, 2009      Category: Sharepoint      Views: 1586
 

I took a look at Heather Solomon's site but couldn't figure this out. I'm
trying to locate the CSS control for the blue background in an all day event. I
thought it was .ms-cal-defaultbgcolor but that only seems to apply to the
background of the title item. Any ideas out there?

Tagged:    

 

6 Answers Found

 
Answer #1       Answered By: Silvia Wilkinson          Answered On: Mar 10, 2009       

My advice: install Firebug and look at the page in Firefox.

Of course the IE developer toolbar should tell you the same thing in
SharePoint's browser of choice...

If you can't find it by tomorrow, I'll take a look and see if I can't track
it down; I've been through almost every conceivable bit of the theme CSS,
and I'm starting to feel at home in the tunnels.

 
Answer #2       Answered By: Candy Walter          Answered On: Mar 10, 2009       

What view are you in? My all-day events show up with a white background  and
colored border in day, week, and month views. Perhaps you have a theme
loaded?

I found that calendar.css -> .contB controls the border, but haven't managed
to change the background yet

 
Answer #3       Answered By: Leanne Rios          Answered On: Mar 10, 2009       

I went through this a while back and using the Firebug extension for Firefox
I found answer. In day  view and week view the blue background  color for the
areas outside standard 8-5 office hours are controlled by the following
calendar.css class selectors:

.ms-cal-enoworkhourF

.ms-cal-enoworkhourF .ms-cal-dayhour

.ms-cal-enoworkhour

.ms-cal-enoworkhour .ms-cal-dayhalfhourF

.ms-cal-enoworkhour .ms-cal-dayhalfhour

.ms-cal-enoworkday

.ms-cal-enoworkday .ms-cal-dayhourF

.ms-cal-enoworkday .ms-dal-dayhalfhourF

.ms-cal-enoworkhour .ms-cal-dayhourF

.ms-cal-enoworkhourB .ms-cal-dayhalfhourF

.ms-cal-enoworkhourB .ms-cal-dayhalfhour

 
Answer #4       Answered By: Zachary Roberts          Answered On: Mar 10, 2009       

Along the lines of this discussion, we like the Tiny calendar  idea from
PathToSharePoint.com for our individual office's homepages. All it does is
replace the css  for the below classes, which I thought would aid the people
trying to make some more sense of the calendar's CSS classes. Add the Calendar
on your home page using the 'Calendar View.' Add the below <style>...</style>
code to a Content Editor Web Part's 'Source Editor' on the same page. I happened
to notice that the jQuery code I posted the other day  got parsed with some
spaces, so look out for incorrect spacing being added to this code:

<style type="text/css">

/* Tiny Calendar */
/* Christophe@... */

/* Remove week blocks */
.ms-cal-weekempty {display:none;}
.ms-cal-week {display:none;}
.ms-cal-weekB {display:none;}
.ms-cal-weekB {display:none;}
/* Shrink cells */
.ms-cal-workitem2B {display:none;}
.ms-cal-noworkitem2B {display:none;}
.ms-cal-nodataBtm2 {display:none;}
.ms-cal-todayitem2B {display:none;}
.ms-cal-workitem {font-size:0px;}
.ms-cal-muworkitem {font-size:0px;}
.ms-cal-noworkitem {font-size:0px;}
.ms-cal-nodataMid {font-size:0px;}
.ms-cal-todayitem {font-size:0px;}
/* thin out header */
.ms-cal-nav {display:none;}
.ms-cal-nav-buttonsltr {display:none;}
.ms-cal-navheader {padding:0px;spacing:0px;}
.ms-calheader IMG {width:15px;}
/* Abbreviate weekdays */
.ms-cal-weekday {letter-spacing:6px; width:22px; overflow: hidden;}


/* Remove week blocks */
.ms-cal-weekempty {display:none;}
.ms-cal-week {display:none;}
.ms-cal-weekB {display:none;}
.ms-cal-weekB {display:none;}
/* Shrink cells */
.ms-cal-workitem2B {display:none;}
.ms-cal-noworkitem2B {display:none;}
.ms-cal-nodataBtm2 {display:none;}
.ms-cal-todayitem2B {display:none;}
.ms-cal-workitem {font-size:0px;}
.ms-cal-muworkitem {font-size:0px;}
.ms-cal-noworkitem {font-size:0px;}
.ms-cal-nodataMid {font-size:0px;}
.ms-cal-todayitem {font-size:0px;}
/* thin out header */
.ms-cal-nav {display:none;}
.ms-cal-nav-buttonsltr {display:none;}
.ms-cal-navheader {padding:0px;spacing:0px;}
.ms-calheader IMG {width:15px;}
/* Abbreviate weekdays */
.ms-cal-weekday {letter-spacing:6px; width:22px; overflow: hidden;}
/* events display */
.ms-cal-defaultbgcolor {padding:0;}
.ms-cal-defaultbgcolor a {font-size:3px;}
.ms-cal-monthitem a {font-size:3px;}
.ms-cal-monthitem a:hover {font-size:10px;}


</style>

You can now slide the calendar to the right column of your page. Hover an event
on the calendar to expand and collapse it. The only stickler I have is that when
you switch to a single day you actually have to use the browser back button to
get back to the calendar view (or refresh the page...)

 
Answer #5       Answered By: Maura Durham          Answered On: Mar 10, 2009       

We're using the Month view. The box that I'm talking about only appears when
you click the box indicating that it is an all day  event.

 
Answer #6       Answered By: Jagat Pandit          Answered On: Mar 10, 2009       

Here's what I see for regular and all-day events:

(Image in line)

I see a light blue border on the All day  Event, no border on the regular
event, and a white background  for the entire cell.

 
Didn't find what you were looking for? Find more on Calendar CSS Or get search suggestion and latest updates.


Your Answer
  • Answer should be atleast 30 Characters.
  • Please put code inside [Code] your code [/Code].