Expanding Calendar Title fields

Apr 12, 2011 at 2:40 PM

Is there a way, using JQUERY, to display the entire Title field in a calendar view web part?

Coordinator
Apr 12, 2011 at 2:42 PM

The quick answer has to be "yes", but I'm not sure you've given enough details for me to be fully helpful.

You can retreive items from the Calendar list using GetListItems and then dow whatever you'd like with them client side.

M.

Apr 12, 2011 at 2:46 PM

Sorry.  Here are the details:  A Calendar event has a title of "It was the best of times, it was the most mediocre of times".

THe Month View of the calendar shows as   4:00 pm - 5:00pm  and under it, It was the best of times,

I want the entire title to display, wrapped.

 

 

Coordinator
Apr 12, 2011 at 2:50 PM

Well, the answer is still "Yes", and the basic method is the same as well.

You'll need to figure out how to match the items you retreive to the values in the DOM for the Calendar and update accordingly. (It may be that the full Title is already in the DOM -- I'd check that first.)

M.

Apr 12, 2011 at 6:21 PM

Sorry, but I'm new to this and need a little spoon feeding.

I found some code that will spit out the full title fields of items on my calendar.  I put it in my Default.aspx page and it looks like this (see below).  Now that I have the full title, I would suspect that I need to call a SetListItem operation and set the Title field?  

<script type="text/javascript" language="javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery.SPServices-0.6.0.min.js"></script>
<script language="javascript" type="text/javascript">

$(document).ready(function() {
  $().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "Calendar",
    CAMLViewFields: "<ViewFields><FieldRef Name='Title' /></ViewFields>",
    completefunc: function (xData, Status) {
      $(xData.responseXML).find("[nodeName='z:row']").each(function() {
        var liHtml = "<li>" + $(this).attr("ows_Title") + "</li>";
        $("#tasksUL").append(liHtml);
      });
    }
  });
});
</script>
<ul id="tasksUL"/>

 

Apr 12, 2011 at 6:52 PM

I think I'm heading down the wrong path with this.  It appears that the calendar title is the full title, but the webpart is truncating it.  Not sure there is anything I can do to expand the calendar cells to display the full title.

 

Coordinator
Apr 12, 2011 at 7:31 PM
Edited Apr 12, 2011 at 7:32 PM

I just added an item to my WSS calendar with the Title="It was the best of times, it was the most mediocre of times". I see the full Title, wrapped.

I wonder if your CSS is what's causing your problem? Is this 2007 or 2010?

M.

Apr 12, 2011 at 7:46 PM

2010

From: sympmarc [email removed]
Sent: Tuesday, April 12, 2011 2:32 PM
To: LaMalva, Laura
Subject: Re: Expanding Calendar Title fields [SPServices:253560]

From: sympmarc

I just added an item to my WSS calendar with the Title="It was the best of times, it was the most mediocre of times". I see the full Title, wrapped.

I wonder if your CSS ius what's causing your problem? Is this 2007 or 2010?

M.

Coordinator
Apr 12, 2011 at 7:52 PM

In calendarv4.css, the class ms-acal-title has white-space set to nowrap. If you override that, you can make the Title wrap in the calendar box. However, there's little room for the full entry given the size of the box.

M.

Apr 12, 2011 at 10:03 PM

Thanks for this. I did try, adding

.ms-acal-title{

white-space:normal;

}

But it didn’t seem to do anything.

I’ll keep googling. But thanks for all your responses today!

BTW – I LOVED your 2 lectures at SP Sat Waltham!

Laura

From: sympmarc [email removed]
Sent: Tuesday, April 12, 2011 2:52 PM
To: LaMalva, Laura
Subject: Re: Expanding Calendar Title fields [SPServices:253560]

From: sympmarc

In calendarv4.css, the class ms-acal-title has white-space set to nowrap. If you override that, you can make the Title wrap in the calendar box. However, there's little room for the full entry given the size of the box.

M.

Coordinator
Apr 13, 2011 at 1:56 AM

Try

div.ms-acal-title a {
  white-space:normal;
}

Glad you liked my sessions!

M.

Apr 13, 2011 at 2:27 PM

Tried it and still it won’t wrap.

Thanks

Laura

From: sympmarc [email removed]
Sent: Tuesday, April 12, 2011 8:56 PM
To: LaMalva, Laura
Subject: Re: Expanding Calendar Title fields [SPServices:253560]

From: sympmarc

Try

div.ms-acal-title a {
  white-space:normal;
}

Glad you liked my sessions!

M.

Apr 13, 2011 at 8:41 PM

Good news –

I tried this on the calendar.aspx page and got the wrap to work!

Bad news is that the cell isn’t big enough to show all of it. I will try looking into resizing the listviewwebpart ? not sure if I can or not.

Thanks

LAura

From: sympmarc [email removed]
Sent: Tuesday, April 12, 2011 8:56 PM
To: LaMalva, Laura
Subject: Re: Expanding Calendar Title fields [SPServices:253560]

From: sympmarc

Try

div.ms-acal-title a {
  white-space:normal;
}

Glad you liked my sessions!

M.

Coordinator
Apr 13, 2011 at 9:32 PM

Great! You're not going to be able to resize the cell with the LVWP. That'll need to be CSS as well.

M.

Apr 13, 2011 at 9:35 PM

We are getting close. The height seems to be set in a style tag and we are trying to figure out how to override it.

Trying this didn’t work…

From: sympmarc [email removed]
Sent: Wednesday, April 13, 2011 4:32 PM
To: LaMalva, Laura
Subject: Re: Expanding Calendar Title fields [SPServices:253560]

From: sympmarc

Great! You're not going to be able to resize the cell with the LVWP. That'll need to be CSS as well.

M.

Apr 14, 2011 at 9:54 AM

When overriding CSS styles in Sharepoint, one of the things that I have found is sometimes you have to use the !important option with your style to ensure that it will override the default. I have done this on many occasions!

Coordinator
Apr 14, 2011 at 9:56 AM

!important is evil, spevilgenius. It almost always comes back to bite you because you'll be trying to make something work and that !important will be overriding you at every turn.

Best to find the right selector in the first place.

M.

Coordinator
Apr 15, 2011 at 2:42 PM
spevilgenius wrote:

When overriding CSS styles in Sharepoint, one of the things that I have found is sometimes you have to use the !important option with your style to ensure that it will override the default. I have done this on many occasions!

As Marc said, !important is evil. There's very very few scenarios where you would want to use it, and this is not one of them. The only time where !important ever really gets used or is needed is for meeting cross-browser compliance with properties like white-space, z-index, etc.; and in those scenarios it's almost always in a browser specific CSS file loaded on top of the base CSS. I do frequently use !important for testing/debug, but as Marc said, the best approach for anything going to production is to find the right selector and do it right. If you use the Chrome dev tools/DOM inspector it's very easy to identify the correct selectors.

I won't go as far as to say "never" use it, because there are a few scenarios where it is needed, but those scenarios are very few and far between.

Apr 15, 2011 at 4:13 PM

Maybe it is the evil in me but I have many places where it works for me and does exactly what I want it to. I do not consider it to be evil but maybe it is because of the environment I am in and I know where I can use it. In my environment sometimes I have to be evil to make things work and I should not assume others have the same issue!

Coordinator
Apr 15, 2011 at 4:26 PM
spevilgenius wrote:

Maybe it is the evil in me but I have many places where it works for me and does exactly what I want it to. I do not consider it to be evil but maybe it is because of the environment I am in and I know where I can use it. In my environment sometimes I have to be evil to make things work and I should not assume others have the same issue!

I think you may have missed the point. Yes it'll work, but it's far from best practice. The issue is that once you've set !important on something, you cannot override that with anything else. If you start to use it all the time, eventually you're going to tie your own hands (and those of anyone else who's doing work around or after you).

!important is often used as the quick fix to the stacked styles that MS uses (a bandaid to figuring out what the real selector is to override the MS styles). Instead of taking the easy/lazy approach of doing this:

.class {
  border: 1px solid #000 !important;
}

Find the right selector and stack them accordingly so that you don't have to use !important:

body #s4-ca .class {
  border: 1px solid #000;
}
It's no more or less work to do it the "right" way (especially with the right bag of tools). The Chrome dev tools as an example will show you exactly what's being applied to what element, which style sheets the markup is coming from, and which styles are being used (and compounded).

Apr 18, 2011 at 5:11 PM

Ok - SUCCESS!  ...here's the code that did it!  (bolded red text is what was added)  - I understand that the !important is dangerous, but since it is used on CAL items, I felt it was ok.  Thanks everyone for the help!

<asp:Content ContentPlaceHolderId="PlaceHolderPageTitleInTitleArea" runat="server">
 <SharePoint:ListProperty Property="TitleBreadcrumb" runat="server"/>
 <SharePoint:UIVersionedContent UIVersion="4" runat="server">
  <ContentTemplate>
   <span class="ms-ltviewselectormenuheader" runat="server">
    <SharePoint:ListTitleViewSelectorMenu AlignToParent="true" id="LTViewSelectorMenu" runat="server" />
   </span>
   
   <style type="text/css">
   
    /* Makes the calendar cell text wrap */
    div.ms-acal-title a {
    white-space:normal;
    }
    
    /* Sets the calendar cell (with events) to 80PX in height */
    div.ms-acal-item{
     //border-color:fuchsia !important;
     height:80px !important;
    }
    
    /* Sets the calendar cell background color (clicked on) to 80PX in height */
    div.ms-acal-vitem{
     height:80px !important;
    }
    
    /* Sets the calendar cell row  to 80PX in height */
    tr.ms-acal-summary-itemrow{
     height:80px !important;
     
    }   
   }

   </style>
   

  </ContentTemplate>
 </SharePoint:UIVersionedContent>
</asp:Content>

Apr 18, 2011 at 9:15 PM

I should now note that the above works great for calendars with just one event on any given day.  When you have more than one event on any given day, the second event overlaps the first.

URGGHHH!  Back to the drawing board.

Apr 19, 2011 at 10:34 AM

Maybe I missed something and did not fully understand the problem. I added three events to a calendar on a site all on the same day with the titles as follows: "This is a really really big title!", "This is an extremely big title for a calendar event", and "It was the best of times it was the most mediocre of times." and all 3 fit in the calendar and are wrapped nicely. So I added more events to different days just like this and they all seem to fit and wrap normally so I am wondering why yours do not. I thought it might be resolution but it should at least scroll unless that is turned off. The other thought that just occured to me is that I am still using WSS 3 and there may be a difference in that!

Apr 19, 2011 at 12:58 PM

spevilgenius - there does seem to be some differences, somehow. Even Marc had different luck when the subject was first brought up.  Not sure it if it browser related?  I debug in firefox, but display in IE8.  I'm working on trying to adjust the position of the div.ms-acal-item.

Coordinator
Apr 19, 2011 at 2:56 PM
Edited Apr 19, 2011 at 2:56 PM

The DOM for calendars in WSS and SharePoint 2010 are quite different, I believe. I wouldn't base anything on what Dan or I made work in WSS.

M.

Coordinator
Apr 19, 2011 at 3:25 PM
lklamalva wrote:

Not sure it if it browser related?  I debug in firefox, but display in IE8.

The number one rule for any design work is cross-browser testing. It's perfectly acceptable to debug in Firefox, I typically do all of my debug in Chrome (in my opinion the Chrome developer tools are far superior to even Firebug), but you must test across all browsers. CSS potentially renders very differently across browsers, IE being the absolute worst. 95% of the time, if it renders correctly in Firefox, Chrome or Safari it'll render right on all three, but IE has never been fully standards compliant; IE9 is a step in the right direction, but it's still not there.

One of the biggest CSS hurdles you'll run into is the way IE calculates the box model for margin and padding calculation with element sizes, and positioning (particularly with floats). If you aren't seeing the same behavior in IE and FF then you haven't written cross-browser compatible CSS.

Coordinator
Apr 27, 2011 at 4:09 PM
Did you solve this? I was on vacation and am back if you need help.
M.
Apr 29, 2011 at 2:31 PM
Edited Apr 29, 2011 at 2:35 PM

Hi Mark -No - not solved.  Works when there is just one entry on a particular day, but not if there are more than one.

I can get the box that holds the title larger, but the second box overlaps the first.

Seems that for each ms-acal_item there is an _Index and I would have to override the height of each?  Not sure. 

Was trying to set the position of the div.ms-cal-item, but that didn't seem to work either.

Apr 10, 2012 at 3:29 PM

Hi,

has someone solved this?
i'm trying to help a customer by changing the css...

thanks

A.

Coordinator
Apr 11, 2012 at 1:32 AM
Edited Apr 11, 2012 at 1:32 AM

A.:

There are a number of things discussed above. Why don't you start a new thread and explain what you are looking to do?

M.

Apr 15, 2013 at 2:37 PM
Hi,

I recently migrated from WSS 3.0 to SharePoint Team Foundation. I'm having the same issue with Calendar title not wrapping. I tried using the suggested highlighted code above and it worked, but when I created recurring events, the Calendar title did not wrap. Any help on this is much appreciated.

LRavenberg.
Coordinator
Apr 15, 2013 at 3:21 PM
Recurring events have slightly different CSS applied to them, if I remember correctly. You'll need to inspeact the elements that tyou want to change the CSS for in the browser and adjust.

M.
Apr 15, 2013 at 7:11 PM
Hi M.

I'm a newbie and not sure if I'm on the right track or not, but i'm having a difficult time identifying the div tag on the CalendarV4.CSS that is associated with the title for the recurring events. If I only know what div tag it's refering to or how to find it, I can adjust the code accordingly in my content editor webpart.

~LRavenberg
Coordinator
Apr 15, 2013 at 7:15 PM
Edited Apr 15, 2013 at 7:23 PM
You should look at the elements that you want to change using the Internet Explorer Developer Tools or Firebug. If you try to look at the CSS first, you're not going to be able to figure out what you need to alter very easily.

BTW, don't ever edit the out of the box CSS files. Instead create your own CSS file with the overrides you'd like to apply to the default styling.

M.