Sep 25, 2012, 9:53 AM
Calendar Override
Hi,
Im a student and pretty new to Internet-Programming. Im trying to make a Calendar for a whole Company where every Staff-Member has a Whole-Day-Event in wich you can see if he is inhouse, ill, by customer...
Thats the current Calendar which I would like to code in Ext.Net(I think weekView would be better):
So Im actually trying to achieve following (Maybe the Scrollbar isnt needed because you could scroll in browser):
Im pretty sure I must override the Week-View, but it seems that the override doesnt get executed.. although firebug shows the adapted JScript-Code.
The other thing is that I also dont know WHAT to change.
Later I will need appx. 200 whole-day-events(therefore Scrollbar) per day for 2-3 Years and I also would like to add Filters for Staff-Members and departments but that would be the next steps.
Thank you in advance for your response.
If I figure it out by my self I will post it here.
Regards,
Avatarus
Im a student and pretty new to Internet-Programming. Im trying to make a Calendar for a whole Company where every Staff-Member has a Whole-Day-Event in wich you can see if he is inhouse, ill, by customer...
Thats the current Calendar which I would like to code in Ext.Net(I think weekView would be better):
So Im actually trying to achieve following (Maybe the Scrollbar isnt needed because you could scroll in browser):
Im pretty sure I must override the Week-View, but it seems that the override doesnt get executed.. although firebug shows the adapted JScript-Code.
The other thing is that I also dont know WHAT to change.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!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>Crazy Calendar</title>
<script type="text/javascript">
var CompanyX = {
someClick: function () {
alert("Clicking Works");
}
}
Ext.calendar.template.WeekBody.override({
constructor: function (config) {
Ext.apply(this, config);
Ext.calendar.template.WeekBody.superclass.constructor([
'<table class="ext-cal-bg-tbl" cellspacing="0" cellpadding="0">',
'<tbody>',
'<tr height="1">',
'<td class="ext-cal-gutter"></td>',
'<td colspan="{dayCount}">',
'<div class="ext-cal-bg-rows">',
'<div class="ext-cal-bg-rows-inner">',
'<tpl for="times">',
'<div class="ext-cal-bg-row">',
'<div class="ext-cal-bg-row-div ext-row-{[xindex]}"></div>',
'</div>',
'</tpl>',
'</div>',
'</div>',
'</td>',
'</tr>',
'<tr>',
'<td class="ext-cal-day-times">',
'<tpl for="times">',
'<div class="ext-cal-bg-row">',
'<div class="ext-cal-day-time-inner">{.}<span class="minutes">00</span></div>',
'</div>',
'</tpl>',
'</td>',
'<tpl for="days">',
'<td class="ext-cal-day-col">',
'<div class="ext-cal-day-col-inner">',
'<div id="{[this.id]}-day-col-{.:date("Ymd")}" class="ext-cal-day-col-gutter"></div>',
'</div>',
'</td>',
'</tpl>',
'</tr>',
'</tbody>',
'</table>'
]);
},
// private
applyTemplate: function (o) {
this.today = Ext.calendar.util.Date.today();
this.dayCount = this.dayCount || 1;
var i = 0,
days = [],
dt = Ext.Date.clone(o.viewStart),
times = [];
for (; i < this.dayCount; i++) {
days[i] = Ext.calendar.util.Date.add(dt, { days: i });
}
// use a fixed DST-safe date so times don't get skipped on DST boundaries
dt = Ext.Date.clearTime(new Date('5/26/1972'));
for (i = 0; i < 24; i++) {
times.push(Ext.Date.format(dt, 'H'));
dt = Ext.calendar.util.Date.add(dt, { hours: 1 });
}
return this.applyOut({
days: days,
dayCount: days.length,
times: times
}, []).join('');
}
});
</script>
<style type="text/css">
.ext-cal-evr, .ext-cal-evi, .ext-cal-evt dl {
color: #000000;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server">
</ext:ResourceManager>
<ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
<Items>
<ext:CalendarPanel ID="CalendarPanel1" runat="server" Region="Center" ShowDayView="False" ShowMonthView="False" ShowTime="false" ActiveIndex="0">
<EventStore ID="EventStore1" runat="server"/>
<Listeners>
<DayClick Fn="CompanyX.someClick" Scope="CompanyX"/>
</Listeners>
<%-- <WeekView ID="WeekView1"
runat="server"
/>--%>
</ext:CalendarPanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>Later I will need appx. 200 whole-day-events(therefore Scrollbar) per day for 2-3 Years and I also would like to add Filters for Staff-Members and departments but that would be the next steps.
Thank you in advance for your response.
If I figure it out by my self I will post it here.
Regards,
Avatarus
