populate calendar with json with children from events node - Using Umbraco and getting started

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Christina 127 posts 390 karma points notactivated

May 07, 2019 @ 12:52

Populate Calendar with JSON problems with converting unixtimestamp

Hi need some help with dateformat in json feed I have a jquery calendar who i populate in a surfacecontroller. json looks like this. I need help with the date -> double timestamp = 1519551404;

[{"start":"\/Date(1560981600000)\/","end":"\/Date(1561154400000)\/","title":"header","content":"\some text;\u003c/p\u003e"},

Code in Surfacecontroller

public class CalendarController : SurfaceController
{

    public JsonResult GetDiaryEvents()
    {
        // Get Data from Umbraco
        var allevents = Umbraco.TypedContent(3283).Children();

        var eventList = from l in allevents
                        select new
                        {
                            start = l.GetPropertyValue("eventStartDate"),
                            end = l.GetPropertyValue("eventEndDate"),
                            title = l.GetPropertyValue("header").ToString(),
                            content = l.GetPropertyValue("ingress").ToString()
                        };
        var rows = eventList.ToArray();

        return Json(rows, JsonRequestBehavior.AllowGet);
    }
    private static DateTime ConvertFromUnixTimestamp(double timestamp)
    {
        var origin = new DateTime(1970, 1, 1, 0, 0, 0, 0);
        return origin.AddSeconds(timestamp);
    }}

Copy Link

Rhys Hamilton 140 posts 942 karma points

May 17, 2019 @ 12:41

0

In JSON, keys must be strings, written with double quotes (as stated here).

Why is it that you want to remove the double quotes?

Copy Link
Christina 127 posts 390 karma points notactivated

May 17, 2019 @ 13:05
0
Thanks I thought they caused errors in the calendar, my problem is the date I think or is it that content is empty? I got error in console
```
VM2845:1 Uncaught SyntaxError: Unexpected token u in JSON at position 0
```
My feed
```
0:
content:
__proto__: Object
end: "/Date(1561154400000)/"
start: "/Date(1560981600000)/"
title: "text"
__proto__: Object
```
Copy Link
Rhys Hamilton 140 posts 942 karma points

May 17, 2019 @ 13:41
0
If you put the following line into a JSON validator:
```
[{"start":"/Date(1560981600000)/","end":"/Date(1561154400000)/","title":"header","content":"\some text;\u003c/p\u003e"}]
```
An error is thrown at "content": "\some text;\u003c/p\u003e". If you add another backslash to the first backslash, the line reads "content": "\\some text;\u003c/p\u003e" and validates perfectly.

This is because in JSON, the backslash is a reserved character. In order to create backslashes, it should be replaced with \\.

You'll need to look more into the do's and don'ts for parsing data, but hopefully this points you in the right direction.
Copy Link

Christina 127 posts 390 karma points notactivated

May 17, 2019 @ 13:42

Hi Rhys can you help me with the ajax post? Many thanks

     $(document).ready(function () {
        moment.locale('sv');
        var calendar = $('#calendar').Calendar({
            locale: 'sv',
            weekday: {
                timeline: {
                    intervalMinutes: 60,
                    fromHour: 10
                }
            },
            events: loadevents()
        }).init();

        events: function loadevents(callback) {
            $.ajax({
                url: '/Umbraco/Surface/Calendar/GetDiaryEvents',
                dataType: 'json',
               data: is it parameters here?
                success: function (data) {

                    var events = data;
                }
            });

            callback(events);
        }
    });

Copy Link

Rhys Hamilton 140 posts 942 karma points

May 17, 2019 @ 14:06
100
The AJAX post might differ depending on what jQuery calendar you're using.

There's a decent tutorial on Youtube here which uses Fullcalendar. If you skip about 20 minutes in, you'll see some AJAX code which might point you in the right direction.

It seems there's two separate issues/questions:
1. Resolving JSON format (which ties into your original question)
2. Rendering events in a jQuery Calendar view (separate question)
Once you're sure your JSON is valid (test it out here), I'd recommend posting a seperate question on the forum regarding rendering.
Copy Link
Christina 127 posts 390 karma points notactivated

May 17, 2019 @ 14:09

1

Many thanks for your help

Copy Link
Rhys Hamilton 140 posts 942 karma points

May 17, 2019 @ 14:10

0

No problem! If you think any of the answers above answered your main question, make sure to mark it as solved so others can quickly find the solution :)

Copy Link
is working on a reply...

Please Sign in or register to post replies