Displaying value from the database in calendar

[rohit dwivedi]

Hi group ,

recently I started using calendar And found it very intresting.

Please help me how an i populate the calendar with database value .

[Darrel Viegas]

If you are using ASP.NET i'll be able to help you out!!!!!!!

Coz i've already done it for my project!!!!!!!!!!

Let me know the technology you are using!!!! 

[rohit dwivedi]

If i am not wrong then you are populating  the json data in the calendar .I don't think so Ajax and json is language dependent .You can help me in ASp  I will try to understand.

However I am using python and django . 

[Darrel Viegas]

Yes you are right in saying that Ajax & JSON are language independent. Note that i've done the following using Ajax and JSON with C#. I don't know the language python and django!!!!!! :(

I did the following stuff for my project:

1) In the Calendar.aspx code behind i typed the following code:

[WebMethod]

    public static EventDetails[] ViewEvents()

    {

        DataTable dt = new DataTable();

        List<EventDetails> details = new List<EventDetails>();

        using (SqlConnection con = new SqlConnection("data source=YOUR_SERVER_NAME; initial catalog=DB_Name; integrated security=true;"))

        {

            using (SqlCommand cmd = new SqlCommand("select id,title,timeSet,startDate,endDate,allDay,fname,lname,emailID,backcolor,forecolor from Events where emailID = 'some_emai_lid'", con))

            {

                con.Open();

                SqlDataAdapter da = new SqlDataAdapter(cmd);

                da.Fill(dt);

                foreach (DataRow dtrow in dt.Rows)

                {

                    EventDetails eve = new EventDetails();

                    eve.id = Int32.Parse(dtrow["id"].ToString());

                    eve.title = dtrow["title"].ToString();

                    eve.timeSet = dtrow["timeSet"].ToString();

                    eve.startDate = dtrow["startdate"].ToString();

                    eve.endDate = dtrow["endDate"].ToString();

                    eve.allDay = dtrow["allDay"].ToString();

                    eve.fname = dtrow["fname"].ToString();

                    eve.lname = dtrow["lname"].ToString();

                    eve.emailID = dtrow["emailID"].ToString();

                    eve.backcolor = dtrow["backcolor"].ToString();

                    eve.forecolor = dtrow["forecolor"].ToString();

                    details.Add(eve);

                }

                con.Close();

            }

        }

        return details.ToArray();

    }

    public class EventDetails

    {

        public int id { get; set; }

        public string title { get; set; }

        public string timeSet { get; set; }

        public string startDate { get; set; }

        public string endDate { get; set; }

        public string allDay { get; set; }

        public string fname { get; set; }

        public string lname { get; set; }

        public string emailID { get; set; }

        public string backcolor { get; set; }

        public string forecolor { get; set; }

    }

2) i wrote the following Ajax code in the  $(document).ready(function() { } block.

$.ajax({

            contentType: "application/json; charset=utf-8",

            data: '{}',

            dataType: "json",

            type: "POST",

            url: "Calendar.aspx/ViewEvents",                                        //the code behind method

            success: function(data) {                                                  //using the value returned by the code behind in a for loop to print all the existing events from the DB

                for (var i = 0; i < data.d.length; i++) {

                    var stdate = new Date(data.d[i].startDate.toString());   //Retrieving the startdate

                    var endate = new Date(data.d[i].endDate.toString());   //Retrieving the enddate

                    var alldayValue;

                    var allDay = data.d[i].allDay.toString();                      //Retrieving the allDay Value

                    if (allDay == "false")

                        alldayValue = false;

                    if (allDay == "true")

                        alldayValue = true;

                    jfcalplugin.addAgendaItem(                  //This is the method that adds the event to the calander. Refer the documentation for more details of this method

                    "#mycal",                                      //The Div element for my calander

                    data.d[i].title,

                    stdate,

                    endate,

                    alldayValue,

                    {

                        first_name: data.d[i].fname.toString(),

                        last_name: data.d[i].lname.toString(),

                        email_ID: data.d[i].emailID.toString(),

                        Reminder_Set_At: data.d[i].timeSet.toString(),

                        Event_ID: data.d[i].id

                    },

                    {

                        backgroundColor: data.d[i].backcolor.toString(),

                        foregroundColor: data.d[i].forecolor.toString()

                    }

                    );

                }

            },

            error: function(result) {

                alert(result.responseText);

            }

        });

Thats it!!!!!

Also note that the DB's Event table has the following columns in my case:

id,title,timeSet,startDate,endDate,allDay,fname,lname,emailID,backcolor,forecolor

All the best. Try it out it should work & hope it gives you a good head start for your project. 

Let me know if there are any issues with the working of this code!!!!!

[rohit dwivedi]

Thank you for the help i will try this week .

[Darrel Viegas]

No problem do let me know if there are any problems!!!!!!

[Bill Philibin]

Hi Darrel...  I know this is from a few years ago. But is this easy to convert to using classic asp instead of C#? I think the webmethod should work with classic asp but I do't know quite how. 

Thanks!