need a help accessing parts of the content object

Matt Brown 62 posts 174 karma points

Jan 04, 2017 @ 22:03

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?

Copy Link

Ole Martin Bakke 112 posts 624 karma points

Jan 05, 2017 @ 08:01

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

Copy Link

Matt Brown 62 posts 174 karma points

Jan 05, 2017 @ 17:52

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.

Copy Link

Matt Brown 62 posts 174 karma points

Jan 06, 2017 @ 23:34

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.

    @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

styling in css from tag in event page

filtered results

Here is the code for the calendar page in fullCalendar.js

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='dist/css/fullcalendar.min.css' rel='stylesheet' />
<link href='dist/css/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<link href='calendarCustom.css' rel='stylesheet' />


<script src='dist/moment.min.js'></script>




<script src='dist/jquery.min.js'></script>




<script src='dist/js/fullcalendar.min.js'></script>




<script src='calendarCustom.js'></script>




<script>

    $(document).ready(function() {

        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay,listWeek'
            },
            defaultDate: '2017-01-01',
            editable: true,
            navLinks: true, // can click day/week names to navigate views
            eventLimit: true, // allow "more" link when too many events
            events: {
                url: 'http://dtnaaiasw125:50001/FullCalendarJSON',
                // url: 'http://dtnaaiasw125:50001/FullCalendarJSON?start=2017-01-01&end=2017-12-30',
                error: function() {
                    $('#script-warning').show();
                }
            },
            loading: function(bool) {
                $('#loading').toggle(bool);
            }
        });

    });

</script>


<style>

    body {
        margin: 0;
        padding: 0;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        font-size: 14px;
    }

    #script-warning {
        display: none;
        background: #eee;
        border-bottom: 1px solid #ddd;
        padding: 0 10px;
        line-height: 40px;
        text-align: center;
        font-weight: bold;
        font-size: 12px;
        color: red;
    }

    #loading {
        display: none;
        position: absolute;
        top: 10px;
        right: 10px;
    }

    #calendar {
        max-width: 900px;
        margin: 40px auto;
        padding: 0 10px;
    }

</style>
</head>
<body>

    <div id='script-warning'>
        Something buggered up in the AJAX call Won't clear cache.
    </div>

    <div id='loading'>loading...</div>

    <div id='calendar'></div>

    <div id="controllerBox">
    <h4> Select one or more Calendars </h4>
    <p> Use shift key to multiple select</p>
        <select multiple size="6" id="optionsControllerBox"> 
            <option value="all">View All</option> 
            <option value="veterans">Veterans</option> 
            <option value="wud">WUD</option> 
        </select>
    </div>

</body>
</html>

Here is the javascript for the filtering:

$( document ).ready(function() {
    $( "#optionsControllerBox" )
  .change(function() {
    $(".fc-event").addClass("hide").removeClass("show");
    var str = "";
    $( "select option:selected" ).each(function() {
      str += $( this ).val() + " ";
    });
    var words = str.split(' '); // convert string to array
    words = words.filter(Boolean); // remove empty elements from array

    for (var i = words.length - 1; i >= 0; i--) {
        $("." + words[i]).removeClass("hide").addClass("show");
        if(words[i] === "all"){
            $(".fc-event").addClass("show").removeClass("hide");
        }
    }
  })
  .trigger( "change" );
});

Hope this helps someone. It took me three days to figure out how to get this all working.

Copy Link

is working on a reply...

This forum is in read-only mode while we transition to the new forum.

You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Flag this post as spam?

Using Calendar with fullCalendar solution shown - filtering - adding class to content