Logo 
Search:

Sharepoint Forum

Ask Question   UnAnswered
Home » Forum » Sharepoint       RSS Feeds

Calendar CSS

  Asked By: Nadia    Date: Mar 10    Category: Sharepoint    Views: 5351

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?

Share: 

 

6 Answers Found

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

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

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

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

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

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

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.




Tagged: