expaned calender

can any one tell me how to show ur calender in full screen for example like this http://www.asp-dev.com/diary/default.asp?cat=all

does i need to put certain style.i have write certain code in order to make this ,but calender is small size.

please do let me know if u need my code etc etc

Thanks

so far i neeed to chaneg this code in order to get desired output

 
 
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Calender2.aspx.vb" Inherits="Calender2" %>
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 id="Head1" runat="server">
<title>title>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">script>

<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js">script>
<script type="text/javascript" src="Scripts/jquery.autocomplete.js">script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">script>


<script type="text/javascript" src="http://jqueryui.com/js/jquery.js">script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">script>


<script type="text/javascript" src="jquery/jquery.datepick.js">script>



<script type="text/javascript">
//var myArray = new Date();
var myArray = [];



$(document).ready(function() {
$('#datepicker').datepicker({ beforeShowDay: highlightEvents, onSelect: showEvent, onChangeMonthYear: showEventsFromMonth });
// $("#datepicker").datepicker();
$.ajax({
type: "GET",
url: "Events.xml",
dataType: "xml",
success: parseXml


});

function highlightEvents(date) {

var isEventDate = false;

for (var i = 0; i < myArray.length; i++) {
if (myArray[i].getTime() == date.getTime()) {
isEventDate = true;
break;
}
}
return [isEventDate, (isEventDate ? 'event' : '')];
}



});
function parseXml(xml) {

var count = 0;
$(xml).find("Events").each(function() {

var Date1 = $(this).find('Date').text() + " ";
$("#output").append(Date1);
var EventName = $(this).find('Name').text() + " ";
$("#output").append(EventName);


myArray.push($.datepicker.parseDate('yy/m/d', Date1));
// myArray.push($.datepicker.parseDate('yy/m/d', Date1));
$("#output").append("
" + " ");

count++;
});
$('#datepicker').datepicker('refresh');

}
function showEventsFromMonth() {

}
function showEvent(dateStr) {
$("Show").append("sdsdsdsdsd");
}


script> 
<script type="text/javascript">
function getDropDownList1Value() {
var SelectedVal = $('#< %=ddlMonth.ClientID %>').val();
return SelectedVal;
}
script>


head>
<body style="font-size:93.5%;">
<form id="form1" runat="server">
<div id="output">
<div id="datepicker">div>
<div id="Show">div>
div>
<asp:DropDownList ID="ddlMonth" runat="server" AutoPostBack="True">
asp:DropDownList>
<asp:DropDownList ID="ddlYear" runat="server" AutoPostBack="True">
asp:DropDownList>
<asp:Button ID="Button1" runat="server" Text="GO !!" />
form>

body>
html>

5 Replies

Know the answer? Post it — somebody with the same question will find it here.

Suthish Nair16y ago
you need to change/update css width/height of datepic js file. The links posted contains full length calendar jqueries. give a try..
erum mirza16y ago

can u please append some code in my code so that i get my desired result.or tell me that i just need css ,style in order to make it full lenght
Suthish Nair16y ago
refer some other jquery samples (full length calendar)..

http://www.1stwebdesigner.com/resources/jquery-calendar-plugins/

http://github.com/vinsol/fullcalendar_rails

http://www.queness.com/post/656/10-beautiful-jquery-and-mootool-calendar-plugins

http://arshaw.com/fullcalendar/
erum mirza16y ago
please check Calender2.aspx as start up page,and events.xml as xml file
Suthish Nair16y ago
Hi,
Remove the code pasted above and upload as attachment of your sample code pages.
That will be easy for everybody to work with required files.