Working with KS.Umbraco7.Calendar and making headway.
I noticed this in the documentation on the last page.
"The startDate is the actual date of the event, content is the contentnode as a DynamicPublishedContent, so you can use ce.content.Name , ce.content.Url and everything else you are used to. "
The problem is I am not used to much so I don't know anything else in the ce.content object that might be there for me to use. I want more than ce.content.URL and ce.content.Name.
Where can I get a list of everything in the object? Is it from you or from Umbraco?
The ce.content object represents the actual node of the event and the properties on that node is determined by the document type that you have created.
A list of all Umbraco standard properties, function etc. you can get from a cheat sheet here: https://our.umbraco.org/projects/developer-tools/umbraco-v6-mvc-razor-cheatsheets/
Yes. That helps very much. I have it printed out now. I had found some of these but not nearly all.
Case:
I am building an internal site for our Diversity and Inclusion group. They have events that they want to show on their calendar. - Easy
They also have special interest groups, for instance: Working Parents, Women in Technology, STEM, Veteran Employees.
They want each of these sub groups to also have their own calendars on the same site that show just events for that group and for a master calendar to show all the events from all the calendars.
We needed to assign a tag to each event so we could filter the calendar so as to have events from multiple departments to be displayed differently in the front end by class. So I added a Tag field to the event documentType so the author can add a tag that will become a class in the front end.
The Calendar.Content has an Dynamic Node Property of Id so we get that and then when I am writing the JSON, I use @Umbraco.Content(ce.content.Id).Tag to get the contents of the Tag field that I added to the Event page and we put that in the className field for fullCalendar.js to use to stick it in the class of the event on the front end.
This is the template that I call to make the JSON for fullCalendar.js.
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@using KS.Umbraco7.Calendar.Core
@{
Layout = null;
}
@{
var calItems = new List<object>();
foreach (CalendarEvent ce in Calendar.getEvents(Convert.ToDateTime(Request.QueryString["start"]), Convert.ToDateTime(Request.QueryString["end"]), "eventDate"))
{
calItems.Add(new { title = @ce.content.Name, className = @Umbraco.Content(ce.content.Id).Tag, url = @ce.content.Url, start = @ce.startDate.ToString("yyyy-MM-ddTHH:mm"), end = (ce.endDate.HasValue ? ce.endDate.Value.ToString("yyyy-MM-dd HH:mm") : "") });
}
Json.Write(calItems, Response.Output);
}
On the front end our calendar looks like this (functional prototype, not styled yet)
First pic shows styling with CSS for class names derived from tag on the event page.
Second pic shows filtered results
Here is the code for the calendar page in fullCalendar.js
Using Calendar with fullCalendar solution shown - filtering - adding class to content
Working with KS.Umbraco7.Calendar and making headway.
I noticed this in the documentation on the last page.
"The startDate is the actual date of the event, content is the contentnode as a DynamicPublishedContent, so you can use ce.content.Name , ce.content.Url and everything else you are used to. "
The problem is I am not used to much so I don't know anything else in the ce.content object that might be there for me to use. I want more than ce.content.URL and ce.content.Name.
Where can I get a list of everything in the object? Is it from you or from Umbraco?
The ce.content object represents the actual node of the event and the properties on that node is determined by the document type that you have created. A list of all Umbraco standard properties, function etc. you can get from a cheat sheet here: https://our.umbraco.org/projects/developer-tools/umbraco-v6-mvc-razor-cheatsheets/
Hope this helps
Yes. That helps very much. I have it printed out now. I had found some of these but not nearly all.
Case: I am building an internal site for our Diversity and Inclusion group. They have events that they want to show on their calendar. - Easy
They also have special interest groups, for instance: Working Parents, Women in Technology, STEM, Veteran Employees.
They want each of these sub groups to also have their own calendars on the same site that show just events for that group and for a master calendar to show all the events from all the calendars.
Answered my own question but might help others...
We needed to assign a tag to each event so we could filter the calendar so as to have events from multiple departments to be displayed differently in the front end by class. So I added a Tag field to the event documentType so the author can add a tag that will become a class in the front end.
The Calendar.Content has an Dynamic Node Property of Id so we get that and then when I am writing the JSON, I use @Umbraco.Content(ce.content.Id).Tag to get the contents of the Tag field that I added to the Event page and we put that in the className field for fullCalendar.js to use to stick it in the class of the event on the front end.
This is the template that I call to make the JSON for fullCalendar.js.
On the front end our calendar looks like this (functional prototype, not styled yet)
First pic shows styling with CSS for class names derived from tag on the event page.
Second pic shows filtered results
Here is the code for the calendar page in fullCalendar.js
Here is the javascript for the filtering:
Hope this helps someone. It took me three days to figure out how to get this all working.
is working on a reply...