![]() Once I got the DVWP web part on the page I changed the layout to use the bulleted list style (this is the easiest style to work with IMO). This may prove to be too large if the calendar is populated with that many events, but in general there aren’t more than 20-30 future events scheduled at a given time. ![]() Paging doesn’t really work well with this solution because it uses URL query string parameters, so I set it to limit the total items returned to 1,000 (in a future post I may explore paging to see if there is any value in using paging with this plugin by hooking into those query string parameters). This allows people to view events up to three months in the past, as well as current and future events. I also sorted the events by start time in ascending order. I didn’t want to bog down the browser by loading hundreds of really old events, so I set a filter on the DVWP so that only events with a start time greater than or equal to today minus 90 days would be displayed (see this post for more information on setting up CAML query offsets). I chose the Calendar list as my data source, selected the Title field and inserted it as a “Multiple Item View.” Insert a DVWP with the calendar as the data source, and insert the Title field as a "Multiple Item View." I selected the web part zone and inserted a new DVWP. To make this happen, I used a Data View Web Part ( DVWP) to output the necessary JavaScript for the plugin to generate the calendar. This can be done in a Content Editor Web Part, but I prefer to add them in the PlaceHolderMain section. The last step in prepping the page was to open it in SPD and add references to the CSS and JavaScript files that the calendar will need just below the tag on the page (you could also put them in a Content Editor Web Part): Load the CSS and JavaScript references on the page. Next I opened that view and hid the default list view web part for the calendar. Then I switched back to the web UI, went to the calendar settings, and modified the duplicate “Calendar” view so I could rename it and set it as the default (this is the view that will contain our custom calendar). ![]() Once the files were uploaded, I copied the calendar.aspx page and renamed it CalendarCustom.aspx in SharePoint Designer ( SPD). I keep all of my resources in a "WebResources" document library grouped by the type of resource. I like to use a library called WebResources and add a choice column with options for “CSS,” “Image,” “JavaScript,” and “jQuery” so I can keep track of all of my various resources in one place, with versioning. I downloaded the latest FullCalendar package, unzipped the file, and uploaded the CSS and JavaScript files to a document library on my site. I haven’t tested this in SharePoint 2010, but it should work just fine regardless of the version (just verify all of the column references in case any of them are named differently). I remembered coming across the FullCalendar jQuery plugin a while back, so I decided to try using it with the calendar on my department’s site. This entry is part 1 of 2 in the series Building a Better SharePoint Calendar.Īs part of a large department site redesign project, I wanted to implement a better calendar solution than what MOSS 2007 gives you OOTB.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |