Click here to Skip to main content
15,882,113 members
Please Sign up or sign in to vote.
4.50/5 (2 votes)
See more:
Hi All.

I Have search for a solution to this, but can't find any, so hope someone here can help.

I have found a FullCalendar jQuery ex. with JSON http://simpledotnetsolutions.wordpress.com/2012/08/14/exploring-jquery-plugin-fullcalendar/

but the først ex. i can't get it to my page, it's just load and then show a blank page. I have tryed debug, but get no results.

Can someone see whats the problem and why im getting a blank/empty page !?

Main_code

ASP.NET
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="default.aspx.vb" Inherits="_default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head  runat="server">
    <title></title>
    <link href="css/fullcalendar.css" rel="stylesheet" />
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="js/fullcalendar.min.js"></script>
    <script src="https://github.com/douglascrockford/JSON-js/raw/master/json2.js" type="text/javascript"></script>
    <script src="js/jquery-ui-timepicker-addon-1.0.5.js"></script>
    <script src="js/jquery.qtip-1.0.0-rc3.min.js"></script>
    <script type="text/javascript">
        function UpdateMyEvent(event) {
            var eventToSave = new Object();;
            eventToSave.EventID = event.id;
            eventToSave.StartDate = event.start.toLocaleString();
            eventToSave.EndDate = event.end.toLocaleString();
            eventToSave.EventName = event.title;
            $.ajax({
                type: "POST",
                contentType: "application/json",
                data: "{eventdata1:" + JSON.stringify(eventToSave) + "}",
                url: "default.aspx/UpdateEvent",
                dataType: "json",
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    debugger;
                }
            });
        }


        $(document).ready(function () {
            DisplayCalendar();
        });

        function DisplayCalendar() {
            $.ajax({
                type: "POST",
                contentType: "application/json",
                data: "{}",
                url: "default.aspx/GetEvents",
                dataType: "json",
                success: function (data) {
                    $('div[id*=calendar]').fullCalendar({
                        header: {
                            left: 'prev,next today',
                            center: 'title',
                            right: 'month,agendaWeek,agendaDay'
                        },
                        selectable: true,
                        editable: true,
                        droppable: true,
                        draggable: true,
                        selectable: true,
                        selectHelper: true,
                        eventTextColor: 'Yellow',
                        eventBackgroundColor: 'purple',
                        events:
                        $.map(data.d, function (item, i) {
                            var event = new Object();
                            event.id = item.EventID;
                            event.start = item.StartDate;
                            event.end = item.EndDate;
                            event.title = item.EventName;
                            event.allDay = false;
                            if (event.title == 'Event_1') {
                                event.color = "DarkBlue";
                                event.textColor = "DarkBlue";
                                event.backgroundColor = "yellow";
                                event.title = "Important Meeting";
                            }
                            return event;
                        }),
                        eventRender: function (event, element) {
                            element.attr("categories", event.categoryname),
                            element.qtip({
                                content: event.title + "<br>" + event.start,
                                position: { corner: { tooltip: 'bottomLeft', target: 'topRight' } },
                                style: {
                                    border: {
                                        width: 1,
                                        radius: 3,
                                        color: 'green'
                                    },
                                    padding: 10,
                                    textAlign: 'left',
                                    tip: true
                                }
                            });
                        },
                        eventAfterRender: function (event, element, view) {
                        },
                        eventResize: function (event, dayDelta, minuteDelta, revertFunc) {
                            if ($(this).data("qtip")) $(this).qtip("destroy");
                            if (!confirm("is this okay?")) {
                                revertFunc();
                            }
                            else {
                                UpdateMyEvent(event);
                            }
                        },
                        eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc) {
                            if ($(this).data("qtip")) $(this).qtip("destroy");
                        }
                    });

                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    debugger;
                }
            });
        }
</script>
</head>
<body>
    <form id="form1"  runat="server">
        <asp:ScriptManager ID="SMjquery" runat="server">
          <Scripts>
            <asp:ScriptReference Name="jquery"/>
              <asp:ScriptReference Name="jquery-UI"/>
          </Scripts>
        </asp:ScriptManager>
        http://simpledotnetsolutions.wordpress.com/2012/08/14/exploring-jquery-plugin-fullcalendar/
        <br /><br />
        <div id='calendar'></div>
    </form>
</body>
</html>




Code_Behind
VB
Imports System
Imports System.Configuration
Imports System.Data
Imports System.Linq
Imports System.Web
Imports System.Web.Security
Imports System.Web.UI
Imports System.Web.UI.HtmlControls
Imports System.Web.UI.WebControls
Imports System.Web.UI.WebControls.WebParts
Imports System.Xml.Linq
Imports System.Collections.Generic

Partial Public Class _default
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then

        End If
    End Sub

    <System.Web.Services.WebMethod> _
    Public Shared Function GetEvents() As List(Of [Event])
        Dim events As List(Of [Event])
        If HttpContext.Current.Session("events") IsNot Nothing Then
            events = DirectCast(HttpContext.Current.Session("events"), List(Of [Event]))
        Else
            events = New List(Of [Event])()
            events.Add(New [Event]() With { _
                .EventID = 1, _
                .EventName = "Event_1", _
                .StartDate = DateTime.Now.ToString("MM-dd-yyyy"), _
                .EndDate = DateTime.Now.AddDays(2).ToString("MM-dd-yyyy") _
            })
            events.Add(New [Event]() With { _
                .EventID = 2, _
                .EventName = "Event_2", _
                .StartDate = DateTime.Now.AddDays(4).ToString("MM-dd-yyyy"), _
                .EndDate = DateTime.Now.AddDays(5).ToString("MM-dd-yyyy") _
            })
            events.Add(New [Event]() With { _
                .EventID = 3, _
                .EventName = "Event_3", _
                .StartDate = DateTime.Now.AddDays(10).ToString("MM-dd-yyyy"), _
                .EndDate = DateTime.Now.AddDays(11).ToString("MM-dd-yyyy") _
            })
            events.Add(New [Event]() With { _
                .EventID = 4, _
                .EventName = "Event_4", _
                .StartDate = DateTime.Now.AddDays(22).ToString("MM-dd-yyyy"), _
                .EndDate = DateTime.Now.AddDays(25).ToString("MM-dd-yyyy") _
            })
        End If
        HttpContext.Current.Session("events") = events
        Return events
    End Function

    <System.Web.Services.WebMethod> _
    Public Shared Function UpdateEvent(eventdata1 As [Event]) As Boolean
        Dim events As List(Of [Event])
        If HttpContext.Current.Session("events") IsNot Nothing Then
            events = DirectCast(HttpContext.Current.Session("events"), List(Of [Event]))
        Else
            events = New List(Of [Event])()
        End If
        If events.Contains(eventdata1) Then
            'Update DB
            Dim _MyEvent As [Event] = events.Find(Function(bk As [Event]) bk.EventID = eventdata1.EventID)
            If TypeOf _MyEvent Is Object Then
                _MyEvent.StartDate = eventdata1.StartDate
                _MyEvent.EndDate = eventdata1.EndDate
            End If
        End If
        HttpContext.Current.Session("events") = events
        Return True
    End Function

End Class




Event.vb

VB
Imports Microsoft.VisualBasic

Public Class [Event]
    Public Property EventID() As System.Nullable(Of Integer)
        Get
            Return m_EventID
        End Get
        Set(value As System.Nullable(Of Integer))
            m_EventID = Value
        End Set
    End Property
    Private m_EventID As System.Nullable(Of Integer)
    Public Property EventName() As String
        Get
            Return m_EventName
        End Get
        Set(value As String)
            m_EventName = Value
        End Set
    End Property
    Private m_EventName As String
    Public Property StartDate() As String
        Get
            Return m_StartDate
        End Get
        Set(value As String)
            m_StartDate = Value
        End Set
    End Property
    Private m_StartDate As String
    Public Property EndDate() As String
        Get
            Return m_EndDate
        End Get
        Set(value As String)
            m_EndDate = Value
        End Set
    End Property
    Private m_EndDate As String
End Class
Posted

1 solution

Add reference to the Jquery library in the head of your page:
XML
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.js" type="text/javascript"></script>
   <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>


Take care with the date format. Depending on your settings it may be:
VB
_Event.StartDate = DirectCast(reader("eventStart"), DateTime).ToString("yyyy-MM-dd hh:mm")
 
Share this answer
 
v3

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900