Sep 09, 2011, 2:48 PM
[CLOSED] Calendar basic requirements?
Hi,
Can you please let me know what are basic requirements to add calendar to web application? I need the design as showing in the attachment. I have added the design code as below...
Can you please let me know what are basic requirements to add calendar to web application? I need the design as showing in the attachment. I have added the design code as below...
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ExtCalendarInfo.aspx.cs"
Inherits="AtlosWeb_ExtCalendarInfo" %>
<%@ 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 id="Head1" runat="server">
<title></title>
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Style" />
<link href="Shared/resources/css/main.css" rel="stylesheet" type="text/css" />
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Script" />
<script type="text/javascript" src="Shared/resources/js/common.js"></script>
<style type="text/css">
.ext-color-4, .ext-ie .ext-color-4-ad, .ext-opera .ext-color-4-ad
{
color: #7F0000;
}
.ext-cal-day-col .ext-color-4, .ext-dd-drag-proxy .ext-color-4, .ext-color-4-ad, .ext-color-4-ad .ext-cal-evm, .ext-color-4 .ext-cal-picker-icon, .ext-color-4-x dl, .ext-color-4-x .ext-cal-evb
{
background: #7F0000;
}
.ext-color-4-x .ext-cal-evb, .ext-color-4-x dl
{
border-color: #7C3939;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" IDMode="Explicit"
InitScriptMode="Linked"
RemoveViewState="true"
Namespace="CompanyX" />
<ext:Viewport ID="Viewport1" runat="server" StyleSpec="bg" Layout="BorderLayout">
<Items>
<ext:Panel ID="Panel1" runat="server" Title="" Width="179" MinWidth="175" MaxWidth="180"
Split="true" Collapsible="true" Collapsed="false" Region="West" Cls="app-west"
Layout="BorderLayout">
<Items>
<ext:Panel ID="Panel2" runat="server" Border="false" Collapsed="false" Region="Center"
Title="" Header="false">
<Items>
<ext:RowLayout ID="RowLayout1" runat="server">
<Rows>
<ext:LayoutRow RowHeight="0.96">
<ext:Panel ID="pnlCalLeft" runat="server" Region="Center" Border="false" BodyStyle="background-color:#ffffff">
<TopBar>
<ext:Toolbar ID="tbViewAll" runat="server">
<Items>
<ext:ComboBox ID="cboViewAll" runat="server" Width="172">
</ext:ComboBox>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:DatePicker ID="dpLeft" runat="server" Cls="ext-cal-nav-picker">
<Listeners>
<Select Fn="CompanyX.setStartDate" Scope="CompanyX" />
</Listeners>
</ext:DatePicker>
<ext:Panel ID="pnlEvents" runat="server" Title="Event (quick add)" Icon="Date" BodyStyle="background-color:#ffffff"
Border="false" Layout="FormLayout" Padding="5">
<Items>
<ext:CompositeField ID="cfRateLock" runat="server" AnchorHorizontal="100%" FieldLabel=""
HideLabel="true">
<Items>
<ext:Button ID="btnRateLock" runat="server" Text="Rate Lock" Flex="1">
</ext:Button>
</Items>
</ext:CompositeField>
<ext:CompositeField ID="cfClosingDate" runat="server" AnchorHorizontal="100%" FieldLabel=""
HideLabel="true">
<Items>
<ext:Button ID="btnClosingDate" runat="server" Text="Closing Date" Flex="1">
</ext:Button>
</Items>
</ext:CompositeField>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
</ext:LayoutRow>
<ext:LayoutRow RowHeight="0.04">
<ext:Panel ID="pnlBottom" runat="server" Border="false">
<TopBar>
<ext:Toolbar ID="tbBottom" runat="server" Height="27">
<Items>
<ext:ToolbarFill>
</ext:ToolbarFill>
</Items>
</ext:Toolbar>
</TopBar>
</ext:Panel>
</ext:LayoutRow>
</Rows>
</ext:RowLayout>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
<ext:Panel ID="pnlRight" Region="Center" runat="server" Layout="BorderLayout" Padding="5">
<Items>
<ext:CalendarPanel ID="calPanel" runat="server" Region="Center"
ActiveIndex="2"
Border="false">
<MonthView ID="MonthView1"
runat="server"
ShowHeader="true"
ShowWeekLinks="true"
ShowWeekNumbers="true"
/>
</ext:CalendarPanel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
<ext:EventEditWindow ID="EventEditWindow1" runat="server" Hidden="true" GroupStoreID="GroupStore1">
<Listeners>
<EventAdd Fn="CompanyX.record.add" Scope="CompanyX" />
<EventUpdate Fn="CompanyX.record.update" Scope="CompanyX" />
<EditDetails Fn="CompanyX.record.edit" Scope="CompanyX" />
<EventDelete Fn="CompanyX.record.remove" Scope="CompanyX" />
</Listeners>
</ext:EventEditWindow>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ext.Net;
using Ext.Net.Calendar.Demo;
public partial class AtlosWeb_ExtCalendarInfo : System.Web.UI.Page
{
protected void Page_Init(object sender, EventArgs e)
{
this.calPanel.EventStore = new EventStore { ID = "EventStore1" };
this.calPanel.EventStore.SubmitData += EventStore_SubmitData;
}
void EventStore_SubmitData(object sender, StoreSubmitDataEventArgs e)
{
var events = e.Object<Event>();
((EventsViewer)this.Page.LoadControl("../Shared/Common/EventsViewer.ascx")).Render(events);
}
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.calPanel.EventStore.Events.AddRange(Data.Events);
}
}
[DirectMethod(Namespace = "CompanyX")]
public void ShowMsg(string msg)
{
X.Msg.Notify("Message", msg).Show();
}
}
Last edited by Daniil; Sep 14, 2011 at 7:16 PM.
Reason: [CLOSED]
Originally Posted by Vladimir
