I haven't tried this myself but how about this one;

https://github.com/Mantus667/EventCalendarBelle

Thanks

Hi Amir,

I am trying to do something similar like your example above however I dont seem to understand how the JSON from the pages get added to the calendar.

I have created a Document Type for the Calendar Events.

I have created a Document Type for a page to display the Calendar, and I have added the Events document type as a child item.

I have created a partial view to fetch all the child events from my Calendar page but I'm now stuck on how to get that data to display in the calendar. Any help you could provide would be appreciated.

Here is my partial view code

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@{
    var selection = Umbraco.TypedContent(1344).Children("booking")
                        .Where(x => x.IsVisible());
}

@foreach (var item in selection)
{
    var startDate = item.GetPropertyValue<DateTime>("bookingStartDate");
    var endDate = item.GetPropertyValue<DateTime>("bookingEndDate");

    if (item.IsLast())
    {
        var booking = new
        {
            title = "Unavailable",
            start = startDate.ToString("dd,MM,yyyy"),
            end = endDate.ToString("dd,MM,yyyy")
        };

        @Html.Raw(Json.Encode(booking))
    }
    else
    {
        var booking = new
        {
            title = "Unavailable",
            start = startDate.ToString("dd,MM,yyyy"),
            end = endDate.ToString("dd,MM,yyyy")
        };

        @Html.Raw(Json.Encode(booking) + ",")
    }

}

Kind Regards Eric

Have you found the solution for this? Could you please advise me?

Hi Thao,

Please see below the code I finally got working. Hope it helps

First up is the partial view to return the events in the calendar on my main Availability page.

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@{
    var selection = Umbraco.TypedContent(1344).Children("booking")
                        .Where(x => x.IsVisible());
    var booking = new List<object>();
}

@foreach (var item in selection)
{
    var startDate = item.GetPropertyValue<DateTime>("bookingStartDate");
    var endDate = item.GetPropertyValue<DateTime>("bookingEndDate");

    if (item.IsLast())
    {
        booking.Add( new
        {
            title = "Unavailable",
            start = startDate.ToString("dd,MM,yyyy"),
            end = endDate.ToString("dd,MM,yyyy")
        });
    }

    else
    {
        booking.Add(new
        {
            title = "Unavailable",
            start = startDate.ToString("dd,MM,yyyy"),
            end = endDate.ToString("dd,MM,yyyy")
        });
    }

}
@Html.Raw(Json.Encode(booking))

And on the Availability page I add this code

@using System.Web.Script.Serialization;
@using Newtonsoft.Json;
@{
    Layout = "Master.cshtml";
}

@{
    var selection = Umbraco.TypedContent(1344).Children("booking")
                        .Where(x => x.IsVisible());
    var booking = new List<object>();
}

@foreach (var item in selection)
{
    var startDate = item.GetPropertyValue<DateTime>("bookingStartDate");
    var endDate = item.GetPropertyValue<DateTime>("bookingEndDate");

    if (item.IsLast())
    {
        booking.Add(new
        {
            title = "Unavailable",
            start = startDate.ToString("yyyy-MM-dd"),
            end = endDate.ToString("yyyy-MM-dd"),
            color = "red",
            textColor = "white",
            eventBackgroundColor = "#FF0000"
        });
    }

    else
    {
        booking.Add(new
        {
            title = "Unavailable",
            start = startDate.ToString("yyyy-MM-dd"),
            end = endDate.ToString("yyyy-MM-dd"),
            color = "red",
            textColor = "white",
            eventBackgroundColor = "#FF0000"
        });
    }

}
@{
    var serializer = new JsonSerializer();
    var stringwriter = new StringWriter();
    using (var writer = new JsonTextWriter(stringwriter))
    {
        writer.QuoteName = false;
        writer.QuoteChar = '\'';
        serializer.Serialize(writer, booking);
    }
    var json = stringwriter.ToString();
}

Finally I add the javascript at the bottom to create a listener amd display the dates that are unavailable.

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: ['dayGrid'],
            events: @Html.Raw(json)
        });
        calendar.render();
    });
</script>

If you want to see it in action please see the website I designed this for.

BemersydeEstate.com by Arca Studios

Thank you for posting this!