What's New?

Calendar StartDay attribute bug

Page 1 of 2 12 LastLast
  1. #1
    Dec 19, 2012, 6:26 AM

    Calendar StartDay attribute bug

    Dear Sir,

    For calender control I set startday property as "1" (monday) for monthview and weekview.

    6th jan 2013 event is not shown in Dec 2012 month calender view. It is shown in Jan 2013 month calender view.

    Same thing is worked in Week View.


    Thanks
    Rupesh

    rupeshd.soft1410@gmail.com
    Last edited by Daniil; Jan 03, 2013 at 12:49 PM. Reason: Corrected the title
  2. #2
    Dec 21, 2012, 4:51 AM
    Hi Rupesh,

    Thank you for the report. Please provide a simplified sample to reproduce.
  3. #3
    Jan 03, 2013, 6:20 AM

    Calender StartDay attribute setting issue

    Hi,

    Sorry for late responce,

    Move Haircut event on 6th Jan 2013, then go back to Dec 2012 month view, can't see 6th Jan event on Dec 2012 month view.

    Following is the simplified code.

    calender.aspx page code 
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Calender.aspx.cs" Inherits="Calender" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

   
<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
    <title>Calendar - Ext.NET Examples</title>    
    <link rel="stylesheet" href="resources/css/main.css" />        
    <script type="text/javascript" src="resources/js/common.js"></script>
    
    <style>
        .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" 
            Namespace="CompanyX" 
            />
        
        <ext:Viewport ID="Viewport1" runat="server" Layout="Border">
            <Items>
                <ext:Panel ID="Panel1" 
                    runat="server" 
                    Height="35" 
                    Border="false" 
                    Region="North" 
                    Cls="app-header" 
                    BodyCssClass="app-header-content">
                    <Content>
                        <div id="app-logo">
                            <div class="logo-top">&nbsp;</div>
                            <div id="logo-body">&nbsp;</div>
                            <div class="logo-bottom">&nbsp;</div>
                        </div>
                        <h1>My Calendar</h1>
                        <span id="app-msg" class="x-hidden"></span>
                    </Content>
                </ext:Panel>
                
                <ext:Panel 
                    ID="Panel2" 
                    runat="server" 
                    Title="..." 
                    Layout="Border" 
                    Region="Center" 
                    Cls="app-center">
                    <Items>
                        <ext:Panel ID="Panel3" 
                            runat="server" 
                            Width="176" 
                            Region="West" 
                            Border="false" 
                            Cls="app-west">
                            <Items>
                                <ext:DatePicker 
                                    ID="DatePicker1" 
                                    runat="server" 
                                    Cls="ext-cal-nav-picker">
                                    <Listeners>
                                        <Select Fn="CompanyX.setStartDate" Scope="CompanyX" />
                                    </Listeners>
                                </ext:DatePicker>
                            </Items>
                            <TopBar>
                                <ext:Toolbar ID="Toolbar1" runat="server">
                                    <Items>
                                        <ext:Button 
                                            ID="Button1"
                                            runat="server" 
                                            Text="Save All Events" 
                                            Icon="Disk" 
                                            OnClientClick="CompanyX.record.saveAll();" 
                                            />
                                    </Items>
                                </ext:Toolbar>
                            </TopBar>
                        </ext:Panel>
                        
                        <ext:CalendarPanel
                            ID="CalendarPanel1" 
                            runat="server"
                            Region="Center"
                            ActiveIndex="2"
                            Border="false">

                            <EventStore runat="server">
                                <Model>
                                    <ext:Model runat="server">
                                        <Fields>
                                            <ext:ModelField Name="CalendarId" Type="Int"></ext:ModelField>

                                        
                                                    <ext:ModelField Name="EventId" Type="Int">
                                                    </ext:ModelField>
                                                    <ext:ModelField Name="Title" Type="String">
                                                    </ext:ModelField>
                                                    <ext:ModelField Name="StartDate" Type="Date">
                                                    </ext:ModelField>
                                                    <ext:ModelField Name="EndDate" Type="Date">
                                                    </ext:ModelField>
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </EventStore>


                            <CalendarStore ID="CalendarStore1" runat="server">
                                <Calendars>
                                    <ext:CalendarModel CalendarId="1" Title="Home" />
                                    <ext:CalendarModel CalendarId="2" Title="Work" />
                                    <ext:CalendarModel CalendarId="3" Title="School" />
                                    <ext:CalendarModel CalendarId="4" Title="Other" />
                                </Calendars>
                            </CalendarStore>

                           

                            <MonthView ID="MonthView1" 
                                runat="server" 
                                ShowHeader="true" 
                                ShowWeekLinks="true" 
                                ShowWeekNumbers="true" 
                                StartDay="1"
                                />  
                                <WeekView runat="server" StartDay="1"></WeekView>
                            <Listeners>
                                <ViewChange  Fn="CompanyX.viewChange" Scope="CompanyX" />
                                <EventClick  Fn="CompanyX.record.show" Scope="CompanyX" />
                                <DayClick    Fn="CompanyX.dayClick" Scope="CompanyX" />
                                <RangeSelect Fn="CompanyX.rangeSelect" Scope="CompanyX" />
                                <EventMove   Fn="CompanyX.record.move" Scope="CompanyX" />
                                <EventResize Fn="CompanyX.record.resize" Scope="CompanyX" />

                                <EventAdd    Fn="CompanyX.record.addFromEventDetailsForm" Scope="CompanyX" />
                                <EventUpdate Fn="CompanyX.record.updateFromEventDetailsForm" Scope="CompanyX" />
                                <EventDelete Fn="CompanyX.record.removeFromEventDetailsForm" Scope="CompanyX" />
                            </Listeners>
                        </ext:CalendarPanel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
        
        <ext:EventWindow 
            ID="EventEditWindow1" 
            runat="server"
            Hidden="true"
            CalendarStoreID="CalendarStore1">
            <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:EventWindow>
    </form>
</body>
</html>
    calender.aspx.cs code

    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 Calender : System.Web.UI.Page
{
    protected void Page_Init(object sender, EventArgs e)
    {
        
    }

   

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.CalendarPanel1.EventStore.DataSource = Data.Events;
            this.CalendarPanel1.EventStore.DataBind();
        }
    }

    [DirectMethod(Namespace = "CompanyX")]
    public void ShowMsg(string msg)
    {
        X.Msg.Notify("Message", msg).Show();
    }
}
    App_Code -- Data.cs code

    using System;


namespace Ext.Net.Calendar.Demo
{
    public class Data
    {
        public static EventModelCollection Events
        {
            get
            {
                DateTime now = DateTime.Now.Date;

                return new EventModelCollection { 
                    new EventModel
                    {
                        EventId = 1001,
                        CalendarId = 1,
                        Title = "Vacation",
                        StartDate = now.AddDays(-20).AddHours(10),
                        EndDate = now.AddDays(-10).AddHours(15),
                        IsAllDay = false,
                        Location = "Chuy's!",
                        Url = "http://chuys.com",
                        Notes = "Have fun",
                        Reminder = "15"
                    },
                    new EventModel
                    {
                        EventId = 1002,
                        CalendarId = 2,
                        Title = "Lunch with Matt",
                        StartDate = now.AddHours(11).AddMinutes(30),
                        EndDate = now.AddHours(13),
                        IsAllDay = false,
                        Location = "Chuy's!",
                        Url = "http://chuys.com",
                        Notes = "Order the queso",
                        Reminder = "15"
                    },
                    new EventModel
                    {
                        EventId = 1003,
                        CalendarId = 3,
                        Title = "Project due",
                        StartDate = now.AddHours(15),
                        EndDate = now.AddHours(15),
                        IsAllDay = false
                    },
                    new EventModel
                    {
                        EventId = 1004,
                        CalendarId = 1,
                        Title = "Sarah's birthday",
                        StartDate = now,
                        EndDate = now,
                        IsAllDay = true,
                        Notes = "Need to get a gift"
                    },
                    new EventModel
                    {
                        EventId = 1005,
                        CalendarId = 2,
                        Title = "A long one...",
                        StartDate = now.AddDays(-12),
                        EndDate = now.AddDays(10).AddSeconds(-1),
                        IsAllDay = true
                    },
                    new EventModel
                    {
                        EventId = 1006,
                        CalendarId = 3,
                        Title = "School holiday",
                        StartDate = now.AddDays(5),
                        EndDate = now.AddDays(7).AddSeconds(-1),
                        IsAllDay = true,
                        Reminder = "2880"
                    },
                    new EventModel
                    {
                        EventId = 1007,
                        CalendarId = 1,
                        Title = "Haircut",
                        StartDate = now.AddHours(9),
                        EndDate = now.AddHours(9).AddMinutes(30),
                        IsAllDay = false,
                        Notes = "Get cash on the way"
                    },
                    new EventModel
                    {
                        EventId = 1008,
                        CalendarId = 3,
                        Title = "An old event",
                        StartDate = now.AddDays(-30),
                        EndDate = now.AddDays(-28),
                        IsAllDay = true,
                        Notes = "Get cash on the way"
                    },
                    new EventModel
                    {
                        EventId = 1009,
                        CalendarId = 2,
                        Title = "Board meeting",
                        StartDate = now.AddDays(-2).AddHours(13),
                        EndDate = now.AddDays(-2).AddHours(18),
                        IsAllDay = false,
                        Location = "ABC Inc.",
                        Reminder = "60"
                    },
                    new EventModel
                    {
                        EventId = 1010,
                        CalendarId = 3,
                        Title = "Jenny's final exams",
                        StartDate = now.AddDays(-2),
                        EndDate = now.AddDays(3).AddSeconds(-1),
                        IsAllDay = true
                    },
                    new EventModel
                    {
                        EventId = 1011,
                        CalendarId = 1,
                        Title = "Movie night",
                        StartDate = now.AddDays(18).AddHours(19),
                        EndDate = now.AddDays(18).AddHours(23),
                        IsAllDay = false,
                        Notes = "Don't forget the tickets!",
                        Reminder = "60"
                    }
                };
            }
        }
    }
}

    Please give me solution.

    Thanks In Advance

    Rupesh
  4. #4
    Jan 03, 2013, 8:57 AM
    Thank you.

    Quote Originally Posted by Rupesh View Post
    Move Haircut event on 6th Jan 2013
    Done.

    Quote Originally Posted by Rupesh View Post
    then go back to Dec 2012 month view
    Go back? But it is already the month view. Do you mean the week view?
  5. #5
    Jan 03, 2013, 9:12 AM
    Hi Daniil,


    Go back? means go to previous month view.
    Default month view is for Jan 2013.
    go to previous month view i.e. Dec 2012.


    Thanks
    Rupesh
  6. #6
    Jan 03, 2013, 12:49 PM
    Reproduced.

    Please try the following fix. Put it into the page's head.

    Fix
    <script>
    Ext.calendar.view.AbstractCalendar.override({
        setViewBounds: function(startDate) {
            var start = startDate || this.startDate,
                offset = start.getDay() - this.startDay,
                Dt = Ext.calendar.util.Date;

            switch (this.weekCount) {
            case 0:
            case 1:
                this.viewStart = this.dayCount < 7 ? start: Dt.add(start, {days: -offset, clearTime: true});
                this.viewEnd = Dt.add(this.viewStart, {days: this.dayCount || 7});
                this.viewEnd = Dt.add(this.viewEnd, {seconds: -1});
                return;

            case - 1:
                // auto by month
                start = Ext.Date.getFirstDateOfMonth(start);
                offset = start.getDay() - this.startDay;

                this.viewStart = Dt.add(start, {days: -offset, clearTime: true});

                // start from current month start, not view start:
                var end = Dt.add(start, {months: 1, seconds: -1});
                // fill out to the end of the week:
                this.viewEnd = Dt.add(end, {days: 7 - end.getDay()}); // 7 instead of 6
                return;

            default:
                this.viewStart = Dt.add(start, {days: -offset, clearTime: true});
                this.viewEnd = Dt.add(this.viewStart, {days: this.weekCount * 7, seconds: -1});
            }
        }    
    });
</script>
  7. #7
    Jan 03, 2013, 1:06 PM
    Hi Daniil,


    It is worked for latest version dll.

    But not worked for previous version dll (ver 1.3).

    Is any other solution for previous version?


    Thanks
    Rupesh
  8. #8
    Jan 04, 2013, 8:26 AM
    Please try this fix in Ext.NET v1.

    Fix for Ext.NET v1
    <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />

<script type="text/javascript">
    Ext.calendar.CalendarView.override({
        setViewBounds: function(startDate) {
            var start = startDate || this.startDate,
            offset = start.getDay() - this.startDay;

            switch (this.weekCount) {
            case 0:
            case 1:
                this.viewStart = this.dayCount < 7 ? start: start.add(Date.DAY, -offset).clearTime(true);
                this.viewEnd = this.viewStart.add(Date.DAY, this.dayCount || 7).add(Date.SECOND, -1);
                return;

            case - 1:
                // auto by month
                start = start.getFirstDateOfMonth();
                offset = start.getDay() - this.startDay;

                if (offset < 0) {
                    offset += 7;
                }

                this.viewStart = start.add(Date.DAY, -offset).clearTime(true);

                // start from current month start, not view start:
                var end = start.add(Date.MONTH, 1).add(Date.SECOND, -1);
                // fill out to the end of the week:
                this.viewEnd = end.add(Date.DAY, 7 - end.getDay()); // 7 instead of 6
                return;

            default:
                this.viewStart = start.add(Date.DAY, -offset).clearTime(true);
                this.viewEnd = this.viewStart.add(Date.DAY, this.weekCount * 7).add(Date.SECOND, -1);
            }
        }    
    });
</script>
  9. #9
    Jan 04, 2013, 9:22 AM
    Hi Daniil,


    Thanks

    It's worked.


    Regards
    Rupesh
  10. #10
    Jun 20, 2013, 6:52 AM

    Reopen

    Hi Daniil,

    now I am facing same problem for June 2013 monthview.

    I set the monthview start day as "1".

    in June 2013 month view I can't see events of 1st July 2013. but in July 2013 month view I can see events of 1st july 2013.

    please guide me.


    Thanks
    Rupesh
Page 1 of 2 12 LastLast

Similar Threads

  1. using Umm alqura calender
    By ahmadezzeir in forum 1.x Help
    Replies: 16
    Last Post: Oct 04, 2012, 7:49 AM
  2. Ext.Net.Calender Namespace
    By Rupesh in forum 1.x Help
    Replies: 5
    Last Post: Feb 24, 2012, 12:56 PM
  3. Calender control for another approch
    By gayancc in forum 1.x Help
    Replies: 6
    Last Post: Feb 08, 2011, 10:15 AM
  4. Help with Ext.Calender
    By PrasadJoshi in forum 1.x Help
    Replies: 4
    Last Post: Dec 22, 2010, 9:56 AM
  5. ext Calender panel help
    By PrasadJoshi in forum 1.x Help
    Replies: 1
    Last Post: Dec 15, 2010, 2:37 PM

Tags for this Thread

Posting Permissions