Archief - event kalender (icm ASP.NET)

bluetorch002 · 25 mei 2010

Ik zoek een event driven kalender te maken.

Ik programmeer in ASP.NET ( VB.NEt of C#) en gebruik ook AJAX, Ik heb al talrijke projecten bekeken op inet zoals de fullcalendar . Deze lijkt me de meest professionele keuze ...

Nu de calender die ik moet bouwen heeft nietveel nodig in feite, het enige dat een vereiste is, is een week modus, omdat alles op weekbasis wordt georganiseerd , waarvoor ik een project maak...

Maar mits dit jquery is... heb ik maar 1 vraag, hoe kan ik bvb een klik doen op een calendar met js zodat hij.... Nevermind !

de ultieme vraag is , hoe laat ik js een functie oproepen van ASP.NET ?

Drone · 25 mei 2010

[drone]-[1.05];13306160 zei:
Als je basiskennis van HTTP niet zo goed is kan dit allemaal nogal ingewikkeld lijken maar begin dan eens met een gewoon html formuliertje dat data post naar een webmethod of naar een webservice(asmx). Als dit lukt vervang het formulier dan eens door javascript/jquery. Gebruik ook zeker Firefox met Firebug en bekijk de "Net" tab eens. Deze toont alle Posts/Gets dan heb je een idee wat er allemaal achter de schermen van een website gebeurt.

...

bluetorch002 · 26 mei 2010

already done my friend

even zeggen watik nu heb:

-een webpagina ( aspx ) met een scriptmanager ( de gewone, niet die van de ajaxtoolkit )
-de fullcalendar met de bijhorende files(js en css)
-webservice die momenteel er zo uit ziet
-in webconfig heb ik de protocols geadd van httppost en httpget, dit lukte

Code:

' 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://tempuri.org/")> _
<System.Web.Services.WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<ToolboxItem(False)> _
Public Class GetEvents
    Inherits System.Web.Services.WebService

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

        Return "[{ title: 'testje', start: new Date(2010,5,30,12,0), end: new Date(2010,5,30,13,0), allDay : false},{ title: 'testje2', start: new Date(2010,5,28,12,0), end: new Date(2010,5,28,12,0), allDay: false}]"

    End Function
End Class

Nu ik surf naar GetEvents.asmx/GetEvents en ik krijg mooi die string terug
met daarrond <string> gewrapped.

Nu heb ik bij de load van de pagina waar ik de calender op heb staan het volgende in de head van de pagina:
(PS: mss moet dit niet in de head ?, maar via de scriptmanager en dan registerstartupscript ? ik weet het niet )

Code:

    <script type='text/javascript'>

        $(document).ready(function() {

            var date = new Date();
            var d = date.getDate();
            var m = date.getMonth();
            var y = date.getFullYear();

            $('#calendar').fullCalendar({
                editable: true,
                maxTime: '17:00',
                minTime: '8:00',
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                defaultView: 'agendaWeek'
                ,
                events:
                // probeersel 1
                //"GetEvents.asmx/GetEvents"
                // end 1

                // probeersel 2
                function() {
                    $.ajax({
                        async: false,
                        type: "GET",
                        contentType: "application/json; charset=utf-8",
                        url: "GetEvents.asmx/GetEvents",
                        //data: "", // ik geef geen params mee, dus ik veronderstel dat ik dat dan mag weglaten
                        dataType: "json",
                        success: function(msg) {
                        // hier wil ik de events writen ofzo
                            
                            alert(msg);
                            alert(msg.d);
                        }
                    });

                } // einde function
                //end probeersel 2


                // default event mapping
                //[

                //				{
                //				    title: 'All Day Event',
                //				    start: new Date(y, m, 1)
                //				},
                //				{
                //				    title: 'Long Event',
                //				    start: new Date(y, m, d - 5),
                //				    end: new Date(y, m, d - 2)
                //				},
                //				{
                //				    id: 999,
                //				    title: 'Repeating Event',
                //				    start: new Date(y, m, d - 3, 16, 0),
                //				    allDay: false
                //				},
                //				{
                //				    id: 999,
                //				    title: 'Repeating Event',
                //				    start: new Date(y, m, d + 4, 16, 0),
                //				    allDay: false
                //				}


                //]
                // einde default event mapping
			,
                timeFormat: 'H(:mm)' // uppercase H for 24-hour clock
		     , monthNames: ['Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni', 'Juli', 'Augustus', 'September', 'Oktober', 'November', 'December']
		     , monthNamesShort: ['Jan', 'Feb', 'Ma', 'Apr', 'Mei', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec']
		     , dayNames: ['Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag', 'Zondag']
		     , dayNamesShort: ['Ma', 'Di', 'Wo', 'Do', 'Vr', 'Za', 'Zo']
		     , buttonText: {
		         today: 'vandaag',
		         month: 'maand',
		         week: 'week',
		         day: 'dag'
		     }

            });

        });
 
</script>

men zou een json feed kunnen aanleveren aan het event object zoals hier staat, enige verschil is dat daar een php file wordt gebruikt.....
miss is het enkel compatible met php ?

bluetorch002 · 27 mei 2010

update:

Er zaten wel wat dingen fout in men webservice....

bvb ik was new Date(.... vergeten toe tevoegen wat dus al helemaal fout was.

Ik ben afgestapt van gwn die string te return en probeer het nu met de java.Serialize, dit lukt aardig en krijg nu al een propere json string trug, die automatisch werd aangemaakt vanuit een list van het type calendarevent, waar ik dus een classe voor heb aangemaakt.

Code:

For Each rs As DataRow In ds.Tables(0).Rows
            Select Case True
                Case rs("allday") = True
                    temp = "true"
                Case rs("allday") = False
                    temp = "false"
                Case Else
                    temp = "false"
            End Select

            Dim calevt As New CalendarEvent

            calevt.d_start = "new Date(" & rs("d_start") & ")"
            calevt.d_end = "new Date(" & rs("d_end") & ")"
            calevt.allDay = CBool(temp)
            calevt.title = rs("title").ToString()

            lstCalendarEvent.Add(calevt)

            calevt = Nothing


 

            
            i = i + 1
        Next

Dit geeft het volgende trug

Code:

<string>
[{"id":null,"title":"testje","allDay":false,"d_start":"new Date(2010,5,30,12,0)","d_end":"new Date(2010,5,30,13,0)","url":null,"className":null,"editable":false,"source":null},{"id":null,"title":"testje2","allDay":false,"d_start":"new Date(2010,5,30,14,0)","d_end":"new Date(2010,5,30,15,0)","url":null,"className":null,"editable":false,"source":null},{"id":null,"title":"testje3","allDay":false,"d_start":"new Date(2010,6,6,12,0)","d_end":"new Date(2010,6,6,15,0)","url":null,"className":null,"editable":false,"source":null}]
</string>

Nu het probleem dat ik hier heb, is dat die new Date(.... NIET tussen haakjes mag staan voor de fullcalendar... hoe los ik dit op ?

ik moet dus die js.Serialize moeten aangeven dat die datestart en end niet moeten wrapped worden met een "

bluetorch002 · 27 mei 2010

via firebug zie ik het volgende doorkomen van de webservice

Code:

<?xml version="1.0" encoding="utf-8"?>
<string xmlns="http://tempuri.org/">[{'id':null,'title':'testje','allDay':false,'d_start': new Date(2010,5,30,12,0),'d_end': new Date(2010,5,30,13,0),'url':null,'className':null,'editable':false,'source':null},{'id':null,'title':'testje2','allDay':false,'d_start': new Date(2010,5,30,14,0),'d_end': new Date(2010,5,30,15,0),'url':null,'className':null,'editable':false,'source':null},{'id':null,'title':'testje3','allDay':false,'d_start': new Date(2010,6,6,12,0),'d_end': new Date(2010,6,6,15,0),'url':null,'className':null,'editable':false,'source':null}]</string>

GET http://localhost:60000/GetEvents.asmx/GetEvents?_=1274945846037&d_start=1275170400&d_end=1275775200
GET http://localhost:60000/GetEvents.asmx/GetEvents?_=1274945846037&d_start=1275170400&d_end=1275775200

ik gok dat die xml wrap het allemaal verkl***

hoe doe ik die weg ...

bluetorch002 · 27 mei 2010

het probleem is volges mij puur het feit dat men webservice asmx XML truggeeft in plaats van een json string...

ook al heb ik nu in men webservice het volgende gedclareerd als responsetype

Code:

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

' 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://tempuri.org/")> _
<System.Web.Services.WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<ToolboxItem(False)> _
Public Class GetEvents
    Inherits System.Web.Services.WebService

    <WebMethod()> _
    Public Function HelloWorld() As String
        Return "Hello World"
    End Function


''''''''' TOCH DUIDELIJK RESPONSEFORMAT = JSON, NIET ???

    <WebMethod()> _
    <ScriptMethod(ResponseFormat:=ResponseFormat.Json)> _
    Public Function GetEvents() As List(Of CalendarEvent)


        'ByVal d_start As String, ByVal d_end As String, ByVal dummy As String
        Dim ds As New DataSet
        Dim sqlCmd As New SqlCommand
        Dim strSql As String = ""

        strSql = "select id,title,d_start,d_end,allday,url from tblcalendar"

        sqlCmd.CommandText = strSql
        ds = DAL.ExecQuery(sqlCmd)

        Dim temp As String = ""
        Dim strDum As String = ""
        Dim ubound As Integer = ds.Tables(0).Rows.Count - 1
        Dim lstCalendarEvent As New List(Of CalendarEvent)



        ' Create a multidimensional jagged array
        Dim JaggedArray As String()() = New String(ds.Tables(0).Rows.Count - 1)() {}
        Dim i As Integer = 0
        For Each rs As DataRow In ds.Tables(0).Rows
            Select Case True
                Case rs("allday") = True
                    temp = "true"
                Case rs("allday") = False
                    temp = "false"
                Case Else
                    temp = "false"
            End Select

            Dim calevt As New CalendarEvent

            calevt.d_start = "new Date(" & rs("d_start") & ")"
            calevt.d_end = "new Date(" & rs("d_end") & ")"
            calevt.allDay = CBool(temp)
            calevt.title = rs("title").ToString()

            lstCalendarEvent.Add(calevt)

            calevt = Nothing


            'strDum = lstCalendarEvent(1).id & " " & lstCalendarEvent(1).title & " " & lstCalendarEvent(1).d_start & " " & lstCalendarEvent(1).d_end
            'strDum += "///  " & vbCrLf

            JaggedArray(i) = New String() {rs("title").ToString(), rs("d_start").ToString(), rs("d_end").ToString(), temp}
            i = i + 1
        Next

        'Return lstCalendarEvent()
        ' Return JSON data

        Dim js As New JavaScriptSerializer()
        Dim strJSON As String = js.Serialize(lstCalendarEvent)
        'tijdelijke oplossing?
        'strJSON = strJSON.Replace("""""new Date", "new Date")
        'strJSON = strJSON.Replace("0)""""", "0)")

        Return lstCalendarEvent


        'Dim strT As String = ""
        'strT = "[{'id':null,'title':'testje','allDay':false,'d_start': new Date(2010,5,30,12,0),'d_end': new Date(2010,5,30,13,0),'url':null,'className':null,'editable':false,'source':null},{'id':null,'title':'testje2','allDay':false,'d_start': new Date(2010,5,30,14,0),'d_end': new Date(2010,5,30,15,0),'url':null,'className':null,'editable':false,'source':null},{'id':null,'title':'testje3','allDay':false,'d_start': new Date(2010,6,6,12,0),'d_end': new Date(2010,6,6,15,0),'url':null,'className':null,'editable':false,'source':null}]"
        'Return strT

        'Return "[{ title: 'testje', start: new Date(2010,5,30,12,0), end: new Date(2010,5,30,13,0), allDay : false},{ title: 'testje2', start: new Date(2010,5,28,12,0), end: new Date(2010,5,28,12,0), allDay: false}]"

    End Function

End Class

bluetorch002 · 27 mei 2010

weer update:
na lang te knoeien heb ik nu gewoon een aspx pagina gemaakt die puur de json string weergeeft met response.write . dit lukt al... de events komen in de calender...

enige prob is dat enkel chrome ze correct weergeeft, IE en FF laten niet elke event zien, enkel de events die een volledige dag duren, met het property allDay: true, dit property is default true.... dus ik denk dat er iets mis is met de declaratie van de boolean in de json...
dit is nu .... "allDay": false , het veranderen naar "allDay": "false" verandert niets aan de zaak

bluetorch002 · 28 mei 2010

de boolean moest in een bool geschreve worden en niet in string.

Ik heb het werkende gekregen met response.write en men json string zelf op te bouwen met een loop... niet echt proper , maar dit is de beste oplossing gezien dit sneller gedaan is...

ik krijg men webmethod gewoon niet zo, dat hij puur json terug geeft , ipv het te wrappen in een xml

Drone · 28 mei 2010

ASMX and JSON – Common mistakes and misconceptions | Encosia

Voor 25 dollar kan je een serie video's kopen die enkel over jquery en asp.net gaan.

http://tekpub.com/preview/jquery

bluetorch002 · 28 mei 2010

idd, al gezien...

al 2 keer gelezen, die vids nog ni gekocht wel nie

Archief - event kalender (icm ASP.NET)

bluetorch002

Legacy Member

Drone

Legacy Member

bluetorch002

Legacy Member

bluetorch002

Legacy Member

bluetorch002

Legacy Member

bluetorch002

Legacy Member

bluetorch002

Legacy Member

bluetorch002

Legacy Member

Drone

Legacy Member

bluetorch002

Legacy Member