Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: VB jQuery JSON
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
 
<%@ 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
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
 
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 7-Oct-12 6:59am

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Add reference to the Jquery library in the head of your page:
 <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:
 _Event.StartDate = DirectCast(reader("eventStart"), DateTime).ToString("yyyy-MM-dd hh:mm")
  Permalink  
v3

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

  Print Answers RSS
0 OriginalGriff 278
1 Nguyen.H.H.Dang 230
2 Maciej Los 205
3 Peter Leow 195
4 arvind mepani 187


Advertise | Privacy | Mobile
Web04 | 2.8.140709.1 | Last Updated 4 Sep 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid