Click here to Skip to main content
15,884,425 members

Asp.Net FullCalendar jquery plugin with JSON VB issues

tjbillund asked:

Open original thread
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
Tags: Visual Basic, jQuery, JSON

Plain Text
ASM
ASP
ASP.NET
BASIC
BAT
C#
C++
COBOL
CoffeeScript
CSS
Dart
dbase
F#
FORTRAN
HTML
Java
Javascript
Kotlin
Lua
MIDL
MSIL
ObjectiveC
Pascal
PERL
PHP
PowerShell
Python
Razor
Ruby
Scala
Shell
SLN
SQL
Swift
T4
Terminal
TypeScript
VB
VBScript
XML
YAML

Preview



When answering a question please:
  1. Read the question carefully.
  2. Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
  3. If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
  4. Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.
Let's work to help developers, not make them feel stupid.
Please note that all posts will be submitted under the http://www.codeproject.com/info/cpol10.aspx.



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