Introduction:
In this article I will explain how to implement JQuery calendar control with multiple months in asp.net.
In this article I will explain how to implement JQuery calendar control with multiple months in asp.net.
Description:
In previous post I explained JQuery datepicker calendar control and calendar control with dropdownlist selection for month and year. Now I will explain how to show JQuery calendar with multiple months in asp.net.
In previous post I explained JQuery datepicker calendar control and calendar control with dropdownlist selection for month and year. Now I will explain how to show JQuery calendar with multiple months in asp.net.
If we use Ajax calendar control we
don’t have a chance to display these type custom options and need to write some
custom css classes to change ajax calendar control style other Ajax calendar
will be like this
 |
Instead of making all these changes its
better to use JQuery UI calendar control to customize based on our requirements.
If we want to show multiple months in JQuery calendar control no need to make
many change just by set some basic properties we can achieve this functionality.
To implement this one first open Visual
Studio and create new website after that write following code in your aspx page
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.19.custom.css"
rel="stylesheet"
/>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js"></script>
<script type="text/javascript">
$(function()
{
$("#txtDate").datepicker({
numberOfMonths: 3,
showButtonPanel: true
});
});
</script>
<style type="text/css">
.ui-datepicker
{
font-size: 8pt !important;
}
</style>
</head>
<body>
<form id="form1"
runat="server">
<div class="demo">
<b>Date:</b>
<asp:TextBox ID="txtDate"
runat="server"
/>
</div>
</form>
</body>
</html>
|
If
you observe above code in header section I added some of script files and css
classes by using those files we will display calendar control with beautiful
css style. You can get those files by downloading attached sample.
After
completion of aspx page design and your code modifications just run your
application and check your calendar control that would be like below demo
Demo
 |
Download
sample code attached
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
|
|
2 comments :
How shall i work this at using master page.
how it can use in content place holder by masterpage?