1

I'm trying to format my web service result (JSON) to look like the mentioned example. With this current format FullCalendar is not able to display my events.

If you look at my output you will see that the date format is different from the example even though I tried not to use (ToUnixTimespan) and I have double quotes on every item such as, title,start,end and id.

How can I get rid of those double quotes and format the date and time?

I appreciate your efforts in reaching a solution for my problem.

EXAMPLE

 events: [
          {
            title: 'All Day Event',
            start: '2014-11-01'
          },
          {
            title: 'Long Event',
            start: '2014-11-07',
            end: '2014-11-10'
          },
          {
            id: 999,
            title: 'Repeating Event',
            start: '2014-11-09T16:00:00'
          },
          {
            id: 999,
            title: 'Repeating Event',
            start: '2014-11-16T16:00:00'
          },
          {
            title: 'Conference',
            start: '2014-11-11',
            end: '2014-11-13'
          },
          {
            title: 'Meeting',
            start: '2014-11-12T10:30:00',
            end: '2014-11-12T12:30:00'
          },
          {
            title: 'Lunch',
            start: '2014-11-12T12:00:00'
          },
          {
            title: 'Meeting',
            start: '2014-11-12T14:30:00'
          },
          {
            title: 'Happy Hour',
            start: '2014-11-12T17:30:00'
          },
          {
            title: 'Dinner',
            start: '2014-11-12T20:00:00'
          },
          {
            title: 'Birthday Party',
            start: '2014-11-13T07:00:00'
          },
          {
            title: 'Click for Google',
            url: 'http://google.com/',
            start: '2014-11-28'
          }
        ]

My output looks like this

[
    {
        "id": 10,
        "start": 1427094900,
        "end": 1427185800,
        "title": "new"
    },
    {
        "id": 11,
        "start": 1426978800,
        "end": 1427065200,
        "title": "hi"
    },
    {
        "id": 12,
        "start": 1427094000,
        "end": 1427181300,
        "title": "hi2"
    },
    {
        "id": 13,
        "start": 1427094900,
        "end": 1427100300,
        "title": "test"
    },
    {
        "id": 14,
        "start": 1427094000,
        "end": 1427184900,
        "title": "Al"
    },
    {
        "id": 15,
        "start": 1427698800,
        "end": 1427710500,
        "title": "CalTest"
    }
]

My Class file

Public Class CalendarDTO

    Private m_id As Int32
    Public Property id() As Int32
        Get
            Return m_id
        End Get
        Set(ByVal value As Int32)
            m_id = value
        End Set
    End Property

    Private m_Start As Int64
    Public Property start() As Int64
        Get
            Return m_Start
        End Get
        Set(ByVal value As Int64)
            m_Start = value
        End Set
    End Property

    Private m_End As Int64
    Public Property [end]() As Int64
        Get
            Return m_End
        End Get
        Set(ByVal value As Int64)
            m_End = value
        End Set
    End Property


    Private m_Title As String
    Public Property title() As String
        Get
            Return m_Title
        End Get
        Set(ByVal value As String)
            m_Title = value
        End Set
    End Property


    'Private m_allday As String
    'Public Property allDay() As String
    '    Get
    '        Return m_allday
    '    End Get
    '    Set(ByVal value As String)
    '        m_allday = value
    '    End Set
    'End Property
End Class

My web service

Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.ComponentModel
Imports System.Collections.Generic
Imports System.Data.SqlClient
Imports System.Web.Script.Serialization


<System.Web.Script.Services.ScriptService()> _
<System.Web.Services.WebService(Namespace:="http://someurl/")> _
<System.Web.Services.WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<ToolboxItem(False)> _
Public Class Calendar
    Inherits System.Web.Services.WebService

    <WebMethod()> _
    Public Function EventList() As String


        Dim events As New List(Of CalendarDTO)

        Dim comm1 As SqlCommand
        Dim conn1 As SqlConnection
        Dim reader1 As SqlDataReader
        Dim connectionString1 As String = ConfigurationManager.ConnectionStrings("CalTest").ConnectionString
        conn1 = New SqlConnection(connectionString1)
        comm1 = New SqlCommand("SELECT [id],[title] ,[description],[start] ,[end] ,[allday] FROM [CalTest].[dbo].[event]", conn1)
        conn1.Open()

        reader1 = comm1.ExecuteReader()
        While reader1.Read()


            Dim value As CalendarDTO = New CalendarDTO()

            value.id = reader1("id").ToString()
            value.title = reader1("title").ToString()
            value.start = ToUnixTimespan(reader1("start").ToString())
            value.end = ToUnixTimespan(reader1("end").ToString())

            events.Add(value)

        End While

        reader1.Close()
        conn1.Close()

        Dim js As New System.Web.Script.Serialization.JavaScriptSerializer
        Return js.Serialize(events)
    End Function


    Private Function ToUnixTimespan(ByVal d As DateTime) As Int64
        Dim time As New TimeSpan()
        time = d.ToUniversalTime().Subtract(New DateTime(1970, 1, 1, 0, 0, 0))

        Return CType(Math.Truncate(time.TotalSeconds), Int64)
    End Function

    Private Function FromUnixTimespan(ByVal s As String) As DateTime
        Dim time As DateTime = New DateTime(1970, 1, 1, 0, 0, 0)
        Return time.AddSeconds(s)
    End Function

End Class
Kevin Maxwell
  • 907
  • 2
  • 19
  • 38
  • [This answer](http://stackoverflow.com/a/28975081/1810243) discusses similar issue. Easiest fix is to send the ISO date. – MikeSmithDev Apr 01 '15 at 13:42
  • @MikeSmithDev Thanks but that example is formatting insde jQuery script, I have to change the format insde my "asmx" file. This is the error when I change inside my asmx: System.InvalidCastException: Conversion from string "2015-03-23T08:15:00" to type 'Long' is not valid. ---> System.FormatException: Input string was not in a correct format. I call my asmx inside the FullCalendar.js like this: events: "calendar.asmx/EventList", – Kevin Maxwell Apr 01 '15 at 13:52
  • As I mentioned, the easiest fix is to send the ISO date. The formatting inside the calendar script was just a demonstration of the issue. Included in the answer is a link to another SO post that shows how to accomplish ISO date formatting. – MikeSmithDev Apr 01 '15 at 13:55
  • @MikeSmithDev, I found it by when I try this happens: System.InvalidCastException: Conversion from string "2015-03-23T08:15:00.0000000" to type 'Long' is not valid. ---> System.FormatException: Input string was not in a correct format. – Kevin Maxwell Apr 01 '15 at 13:59
  • Could you just format the data with the [eventDataTransform](http://fullcalendar.io/docs/event_data/eventDataTransform/) callback (transforms data that was fetched from the server)? Or does it need to be a server-side solution? – DanielST Apr 01 '15 at 15:15
  • @KevinKitaro you probably just need to change the datatype for start/end from `Int64` to `String`. – MikeSmithDev Apr 01 '15 at 16:29
  • @slicedtoad I would like to have it as server-side solution... But do you know how to do the eventDataTransform from jQuery? I'm open to any solution because I've been working on this part for almost 10 days... Thanks – Kevin Maxwell Apr 01 '15 at 17:24
  • @MikeSmithDev Thanks Mike I just did as you described, so my date format is fixed and it looks like this: 2015-03-22T00:00:00. But the next issue is that my output has double quotes on id,start,end,title compare to example and next my start and end date values don't have ' ' (apostrophe)... Please look above... Thanks again – Kevin Maxwell Apr 01 '15 at 17:36
  • @KevinKitaro JS accepts both `'` and `"`. And JSON keys can be quoted or unquoted. – DanielST Apr 01 '15 at 17:42
  • @slicedtoad if that's the case, why the calendar is still not able to show my events? – Kevin Maxwell Apr 01 '15 at 18:10
  • @KevinKitaro Post what the event data looks like when it gets to the client (f12,network-tab) – DanielST Apr 01 '15 at 18:12
  • @slicedtoad I get the following: Key Value Request GET /calendar.asmx/EventList?start=2015-03-29&end=2015-04-05&_=1427919199602 HTTP/1.1 – Kevin Maxwell Apr 01 '15 at 20:16
  • @KevinKitaro That's the request, what's the response? Networktab->click on request->click response tab. With chrome or FF. – DanielST Apr 01 '15 at 20:22
  • @slicedtoad [{"id":"10","title":"new","start":"2015-03-23T08:15:00","end":"2015-03-24T09:30:00"},{"id":"11","title":"hi","start":"2015-03-22T00:00:00","end":"2015-03-23T00:00:00"},{"id":"12","title":"hi2","start":"2015-03-23T08:00:00","end":"2015-03-24T08:15:00"},{"id":"13","title":"test","start":"2015-03-23T08:15:00","end":"2015-03-23T09:45:00"}] – Kevin Maxwell Apr 01 '15 at 20:30
  • 1
    The data is fine. The problem is that it's XML instead of JSON. [This](http://stackoverflow.com/questions/11088294/asp-net-asmx-web-service-returning-xml-instead-of-json?rq=1) might tell you how to return JSON instead. If it's a C# setting, maybe @MikeSmithDev can help. If it isn't, I need to see the code where you initialize FC. – DanielST Apr 01 '15 at 20:37
  • @slicedtoad, thank again, I will test with your given link and then I will let you know. But as I understand I should change some of the settings in web.config as well as .asmx file... I will keep you posted – Kevin Maxwell Apr 01 '15 at 20:45
  • Big thanks to @slicedtoad and MikeSmithDev for helping me with this issue... Guys you are amazing !!! – Kevin Maxwell Apr 01 '15 at 23:55

1 Answers1

0

I decided to share my final codes with all of you.

Once again special thanks to slicedtoad and MikeSmithDev

My Class file

Public Class CalendarDTO
    Private m_id As String
    Public Property id() As String
        Get
            Return m_id
        End Get
        Set(ByVal value As String)
            m_id = value
        End Set
    End Property

    Private m_Title As String
    Public Property title() As String
        Get
            Return m_Title
        End Get
        Set(ByVal value As String)
            m_Title = value
        End Set
    End Property

    Private m_Start As String
    Public Property start() As String
        Get
            Return m_Start
        End Get
        Set(ByVal value As String)
            m_Start = value
        End Set
    End Property

    Private m_End As String
    Public Property [end]() As String
        Get
            Return m_End
        End Get
        Set(ByVal value As String)
            m_End = value
        End Set
    End Property

    Private m_allday As String
    Public Property allDay() As String
        Get
            Return m_allday
        End Get
        Set(ByVal value As String)
            m_allday = value
        End Set
    End Property
End Class

My Web Method (ASMX)

Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.ComponentModel
Imports System.Collections.Generic
Imports System.Data.SqlClient
Imports System.Web.Script.Serialization
Imports System.ServiceModel.Web


' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
<System.Web.Script.Services.ScriptService()> _
<System.Web.Services.WebService(Namespace:="http://someurl/")> _
<System.Web.Services.WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<ToolboxItem(False)> _
Public Class Calendar
    Inherits System.Web.Services.WebService

    <WebMethod()> _
    Public Sub EventList()
        'Public Function EventList(ByVal startDate As String, ByVal endDate As String) As String
        ' List to hold events
        Me.Context.Response.ContentType = "application/json; charset=utf-8"

        Dim events As New List(Of CalendarDTO)

        Dim comm1 As SqlCommand
        Dim conn1 As SqlConnection
        Dim reader1 As SqlDataReader
        Dim connectionString1 As String = ConfigurationManager.ConnectionStrings("CalTest").ConnectionString
        conn1 = New SqlConnection(connectionString1)
        comm1 = New SqlCommand("SELECT [id],[title] ,[description],[startdate_event] ,[enddate_event] ,[allday] FROM [CalTest].[dbo].[event]", conn1)
        conn1.Open()


        reader1 = comm1.ExecuteReader()
        While reader1.Read()

            Dim value As CalendarDTO = New CalendarDTO()

            Dim newstartdate As DateTime = reader1("startdate_event").ToString()
            Dim newenddate As DateTime = reader1("enddate_event").ToString()

            value.id = reader1("id").ToString()
            value.title = reader1("title").ToString()
            value.start = newstartdate.ToString("s")
            value.end = newenddate.ToString("s")
            value.allDay = reader1("allday").ToString()

            events.Add(value)
        End While

        reader1.Close()
        conn1.Close()


        Dim jss As New System.Web.Script.Serialization.JavaScriptSerializer()
        Dim strJSON As String = jss.Serialize(events)
        Context.Response.Write(jss.Serialize(events))

    End Sub
End Class

JSON Output

[
    {
        "id": "10",
        "title": "new",
        "start": "2015-03-23T08:15:00",
        "end": "2015-03-24T09:30:00",
        "allDay": ""
    },
    {
        "id": "11",
        "title": "hi",
        "start": "2015-03-22T00:00:00",
        "end": "2015-03-23T00:00:00",
        "allDay": "True"
    },
    {
        "id": "12",
        "title": "hi2",
        "start": "2015-03-23T08:00:00",
        "end": "2015-03-24T08:15:00",
        "allDay": "False"
    },
    {
        "id": "13",
        "title": "test",
        "start": "2015-03-23T08:15:00",
        "end": "2015-03-23T09:45:00",
        "allDay": "False"
    },
    {
        "id": "14",
        "title": "Kevin",
        "start": "2015-03-23T08:00:00",
        "end": "2015-03-24T09:15:00",
        "allDay": "False"
    },
    {
        "id": "15",
        "title": "Home test",
        "start": "2015-03-24T08:15:00",
        "end": "2015-03-25T10:15:00",
        "allDay": "False"
    }
]
Community
  • 1
  • 1
Kevin Maxwell
  • 907
  • 2
  • 19
  • 38