Archive

Archive for May, 2017

JQuery calendar to display event data from Database

Hello,

Try this example to use JQuery calendar to display event data from Database


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
	<link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
 <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<style>
* {
margin: 0 auto;
padding: 0;
}

body {
background-color: #F2F2F2;
}

.container {
margin: 0 auto;
width: 920px;
padding: 50px 20px;
background-color: #fff;
}

h3 {
text-align: center;
}

#calendar {
margin-top: 40px;
}

.event a {
background-color: #42B373 !important;
background-image: none !important;
color: #ffffff !important;
}
</style>

<script type="text/javascript">
 var eventDates = {};
 $(function () {
 $.ajax({
 type: "POST",
 url: "Default2.aspx/GetEvents",
 data: '{}',
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 success: OnSuccess,
 failure: function (response) {
 alert(response.d);
 },
 error: function (response) {
 alert(response.d);
 }
 });
 });

function OnSuccess(response) {
 $(response.d).each(function (i, e) {
 eventDates[convertDate(e.EventDate)] = convertDate(e.EventDate);
 });

$('#calendar').datepicker({
 beforeShowDay: function (date) {
 var highlight = eventDates[convertDate(date)];
 // alert(highlight);
 if (highlight) {
 return [true, "event", highlight];
 } else {
 return [true, '', ''];
 }
 }
 });
 }

function convertDate(inputFormat) {
 function pad(s) { return (s < 10) ? '0' + s : s; }
 var d = new Date(inputFormat);
 return [pad(d.getDate()), pad(d.getMonth() + 1), d.getFullYear()].join('/');
 }

</script>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<h3>Highlight Particular Dates in JQuery UI Datepicker</h3>
<div id="calendar"></div>
</div>
</form>
</body>
</html>

In Code behind :


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;

public partial class Default2 : System.Web.UI.Page
{
[WebMethod]
public static List<Event> GetEvents()
{
List<Event> events = new List<Event>();
events.Add(new Event()
{
EventID = 1,
EventName = "EventName 1",
EventDate = DateTime.Now.ToString("MM-dd-yyyy"),
EventDetail = string.Empty
});
events.Add(new Event()
{
EventID = 2,
EventName = "EventName 2",
EventDate = DateTime.Now.AddDays(4).ToString("MM-dd-yyyy"),
EventDetail = string.Empty
});
events.Add(new Event()
{
EventID = 3,
EventName = "EventName 3",
EventDate = DateTime.Now.AddDays(10).ToString("MM-dd-yyyy"),
EventDetail = string.Empty
});
events.Add(new Event()
{
EventID = 4,
EventName = "EventName 4",
EventDate = DateTime.Now.AddDays(22).ToString("MM-dd-yyyy"),
EventDetail = string.Empty
});
return events;
}

protected void Page_Load(object sender, EventArgs e)
{

}
}

Hope this helps

Good Luck.

Advertisements
Categories: ASP.Net, Jquery