Link to home
Start Free TrialLog in
Avatar of CoolDev2014
CoolDev2014

asked on

asp.net calendar and database

1. when the page is onload, i want to automatically show the current month and next month calender. Is it possible to do that?

2. Inside of the calendar, I would like to show some data and the data comes from the sql server. How to do that? like it will be select checkout car from cars where date = 01/01/2014. so 01/01/2014 in the calender will show the car name and etc.

3. Inside of the calender, I would like to block some date ranges and  the data domes from sql database server as well. is it possible?
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

I don't know how to do this specifically on .net.  I do use fullcalendar http://arshaw.com/fullcalendar/

<link rel='stylesheet' type='text/css' href='fullcalendar.css' />
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript' src='fullcalendar.js'></script>
$(document).ready(function() {

    // page is now ready, initialize the calendar...

    $('#calendar').fullCalendar({
        // put your options and callbacks here
    })

});
<div id='calendar'></div>

Open in new window


You simply need to create a json feed via your .net http://arshaw.com/fullcalendar/docs/event_data/Event_Source_Object/

There is a good learning curve and if you understand js/jquery it is easier.  It did take me a few times using to wrap my head around all it offers but it has a lot of great built in features.  It is also free.

Kendo http://demos.telerik.com/kendo-ui/web/calendar/index.html has .NET wrappers but the entire shabang will set you back $1000.
Avatar of CoolDev2014
CoolDev2014

ASKER

good free option. But need some experts telling me how to do it xml.
You can use an xml fee http://arshaw.com/fullcalendar/docs/event_data/events_function/
$('#calendar').fullCalendar({
    events: function(start, end, callback) {
        $.ajax({
            url: 'myxmlfeed.php',
            dataType: 'xml',
            data: {
                // our hypothetical feed requires UNIX timestamps
                start: Math.round(start.getTime() / 1000),
                end: Math.round(end.getTime() / 1000)
            },
            success: function(doc) {
                var events = [];
                $(doc).find('event').each(function() {
                    events.push({
                        title: $(this).attr('title'),
                        start: $(this).attr('start') // will be parsed
                    });
                });
                callback(events);
            }
        });
    }
});

Open in new window


If you want to select a day or event such http://arshaw.com/fullcalendar/docs/mouse/
$('#calendar').fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {

        if (allDay) {
            alert('Clicked on the entire day: ' + date);
        }else{
            alert('Clicked on the slot: ' + date);
        }

        alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);

        alert('Current view: ' + view.name);

        // change the day's background color just for fun
        $(this).css('background-color', 'red');

    }
});

Open in new window

This gives the similar look and fee of google calendar except you are using your own data source that you control.
thank. assume i built a web service and serving soap with xml. How to parse there in js?
I need some example. Thanks
with asp.net/c# please.
ASKER CERTIFIED SOLUTION
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial