What's New?

[CLOSED] Calendar Help

  1. #1
    Jun 09, 2015, 3:51 PM

    [CLOSED] Calendar Help

    I am trying to get the Calendar to bind to my data on a page level databind.

    I have a drop down list of campuses that changes the data that the calendar displays. The data does not bind to the calendar.

    .cs:
protected void showCalendar()
  {   
    this.CalendarPanel1.EventStore.RemoveAll();
    this.CalendarPanel1.EventStore.Events.Clear();


    UserControl CampusView1 = (UserControl)Master.FindControl("CampusView1");
    DropDownList drpCampus = (DropDownList)CampusView1.FindControl("drpCampus");
    string mySelCampus = drpCampus.SelectedItem.Value.ToString();


    DataSet ds = DBConnMeth.ReturnDataSet(myConnString, myStoredProc, new object[] { mySelCampus });    
      //Comment: ReturnDataSet returns data from my stored proc
    EventModelCollection emc = new EventModelCollection();


    foreach (DataTable d1 in ds.Tables)
    {
      foreach (DataRow row in d1.Rows)
      {
        emc.Add(new EventModel
        {
          EventId = Convert.ToInt32(row["EventID"]),
          CalendarId = Convert.ToInt32(row["EventType"]),
          Title = Convert.ToString(row["EventName"]),
          StartDate = Convert.ToDateTime(row["StartDate"]),
          EndDate = Convert.ToDateTime(row["EndDate"]),
          IsAllDay = false,
          Notes = Convert.ToString(row["RequestedRooms"])
        });
      }
    }


    this.CalendarPanel1.EventStore.Events.AddRange(emc);
    this.CalendarPanel1.EventStore.DataBind();
    this.CalendarPanel1.DataBind();    
  }

//Comment: I have several events in the emc

.aspx:

<ext:Panel ID="pnlShowCal" runat="server" Header="false" Layout="BorderLayout" Height="700" Border="false">
                        <Items>
                          <ext:Panel ID="pnlDatePick" 
                            runat="server" 
                            Region="West" 
                            Header="false"
                            Width="190" 
                            Split="true" 
                            Collapsible="true">
                            <Content>
                              <ext:DatePicker 
                                ID="DatePicker1" 
                                runat="server" 
                                Cls="ext-cal-nav-picker">
                                <Listeners>
                                  <Select Fn="CompanyX.setStartDate" Scope="CompanyX" />
                                </Listeners>
                              </ext:DatePicker>
                            </Content>                            
                          </ext:Panel>


                          <ext:Panel ID="pnlCalView" 
                            runat="server" 
                            Region="Center" 
                            Header="false" >
                            <Content>
                              <ext:CalendarPanel
                                ID="CalendarPanel1" 
                                runat="server"
                                Region="Center"
                                ActiveIndex="2"
                                Border="false" 
                                Height="675"
                                >
                                <CalendarStore ID="CalendarStore1" runat="server">
                                  <Calendars>
                                    <ext:CalendarModel CalendarId="1" Title="District" />
                                    <ext:CalendarModel CalendarId="2" Title="Campus" />
                                    <ext:CalendarModel CalendarId="3" Title="Athletic" />                                   
                                  </Calendars>
                                </CalendarStore>
                                
                                <MonthView 
                                  runat="server" 
                                  ShowHeader="true" 
                                  ShowWeekLinks="true" 
                                  ShowWeekNumbers="true" 
                                  /> 
                                
                              </ext:CalendarPanel>
                            </Content>                            
                          </ext:Panel>
                        </Items>
                      </ext:Panel>
    I also have a ResourceManage in my MasterPage named "rm1" and common.js is located in the "Scripts" folder.
    Last edited by Daniil; Jun 19, 2015 at 4:37 PM. Reason: [CLOSED]
  2. #2
    Jun 09, 2015, 4:36 PM
    Hi @jmilton,

    Unfortunately, I cannot run the code and it is difficult to suggest anything without investigating why the data is not bound.

    Please provide a full test case that we could copy, paste and run.
  3. #3
    Jun 09, 2015, 4:44 PM
    Daniil,

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="CalTest.aspx.cs" Inherits="CalTest" %>
<%@ Import Namespace="System.Data" %>
<script runat="server">
    protected void Page_Init(object sender, EventArgs e)
    {
        this.CalendarPanel1.EventStore = new EventStore { ID = "EventStore1" };
        this.CalendarPanel1.EventStore.SubmitData += EventStore_SubmitData;
        this.CalendarPanel1.EventStore.Listeners.BeforeSync.Handler = 
            @"Ext.Msg.alert('Sync', 'The EventStore initiates a sync request after that action. The EventStore synchronization is not implemented in that example.');
              this.commitChanges();
              return false;";
    }


    void EventStore_SubmitData(object sender, StoreSubmitDataEventArgs e)
    {
        List<EventModel> events = e.Object<EventModel>();
        //((EventsViewer)this.Page.LoadControl("../Shared/Common/EventsViewer.ascx")).Render(events);
    }
    
    protected void Page_Load(object sender, EventArgs e)
    {            
        if (!X.IsAjaxRequest)
        {
            //this.CalendarPanel1.EventStore.Events.AddRange(Data.Events);


          this.CalendarPanel1.EventStore = new EventStore { ID = "EventStore1" };
          this.CalendarPanel1.EventStore.RemoveAll();
          this.CalendarPanel1.EventStore.Events.Clear();


          string mySelCampus = "001";


          DataSet ds = DBConnMeth.ReturnDataSet(myDBConnection, myStoredProc, new object[] { mySelCampus });
          EventModelCollection emc = new EventModelCollection();


          foreach (DataTable d1 in ds.Tables)
          {
            foreach (DataRow row in d1.Rows)
            {
              emc.Add(new EventModel
              {
                EventId = Convert.ToInt32(row["EventID"]),
                CalendarId = Convert.ToInt32(row["EventType"]),
                Title = Convert.ToString(row["EventName"]),
                StartDate = Convert.ToDateTime(row["StartDate"]),
                EndDate = Convert.ToDateTime(row["EndDate"]),
                IsAllDay = false,
                Notes = Convert.ToString(row["RequestedRooms"])
              });
            }
          }
          //Comment: My dataset returns data.


          this.CalendarPanel1.EventStore.Events.AddRange(emc);
          this.CalendarPanel1.EventStore.DataBind();
          this.CalendarPanel1.DataBind();                
        }
    }


    [DirectMethod(Namespace = "CompanyX")]
    public void ShowMsg(string msg)
    {
        X.Msg.Notify("Message", msg).Show();
    }
</script>


<!DOCTYPE html>


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
  <form>
    <ext:ResourceManager runat="server" Namespace="CompanyX" />
        
        <ext:Viewport runat="server" Layout="Border">
            <Items>
                <ext:Panel 
                    runat="server" 
                    Height="35" 
                    Border="false" 
                    Region="North" 
                    Cls="app-header" 
                    BodyCls="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="Panel1" 
                    runat="server" 
                    Title="..." 
                    Layout="Border" 
                    Region="Center" 
                    Cls="app-center">
                    <Items>
                        <ext:Panel 
                            runat="server" 
                            Width="213"
                            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 runat="server">
                                    <Items>
                                        <ext:Button 
                                            runat="server" 
                                            Text="Save All Events" 
                                            Icon="Disk" 
                                            Handler="CompanyX.record.saveAll" 
                                            />
                                    </Items>
                                </ext:Toolbar>
                            </TopBar>
                        </ext:Panel>
                        
                        <ext:CalendarPanel
                            ID="CalendarPanel1" 
                            runat="server"
                            Region="Center"
                            ActiveIndex="2"
                            Border="false">
                            <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 
                                runat="server" 
                                ShowHeader="true" 
                                ShowWeekLinks="true" 
                                ShowWeekNumbers="true" 
                                />  
                            <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="EventWindow1" 
            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>
    The Calendar does not bind or display.
    Last edited by jmilton; Jun 09, 2015 at 9:36 PM. Reason: additional info
  4. #4
    Jun 10, 2015, 1:56 PM

    Another Example with no binding to data 

    
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CalTest.aspx.cs" Inherits="CalTest" %>
<%@ Import Namespace="System.Data" %>
<script runat="server">
    protected void Page_Init(object sender, EventArgs e)
    {
        this.CalendarPanel1.EventStore = new EventStore { ID = "EventStore1" };
        this.CalendarPanel1.EventStore.SubmitData += EventStore_SubmitData;
        this.CalendarPanel1.EventStore.Listeners.BeforeSync.Handler = 
            @"Ext.Msg.alert('Sync', 'The EventStore initiates a sync request after that action. The EventStore synchronization is not implemented in that example.');
              this.commitChanges();
              return false;";
    }


    void EventStore_SubmitData(object sender, StoreSubmitDataEventArgs e)
    {
        List<EventModel> events = e.Object<EventModel>();
        //((EventsViewer)this.Page.LoadControl("../Shared/Common/EventsViewer.ascx")).Render(events);
    }
    
    protected void Page_Load(object sender, EventArgs e)
    {            
        if (!X.IsAjaxRequest)
        {
          //this.CalendarPanel1.EventStore.Events.AddRange(Data.Events);


          this.CalendarPanel1.EventStore = new EventStore { ID = "EventStore1" };
          this.CalendarPanel1.EventStore.RemoveAll();
          this.CalendarPanel1.EventStore.Events.Clear();


          DataTable events = new DataTable();
          events.Columns.Add(new DataColumn("EventId", typeof(int)));
          events.Columns.Add(new DataColumn("Title", typeof(string)));
          events.Columns.Add(new DataColumn("CalendarId", typeof(int)));
          events.Columns.Add(new DataColumn("StartDate", typeof(DateTime)));
          events.Columns.Add(new DataColumn("EndDate", typeof(DateTime)));
          events.Columns.Add(new DataColumn("IsAllDay", typeof(bool)));
          events.Columns.Add(new DataColumn("Notes", typeof(string)));
         
          events.Rows.Add(1, "Event 1", 1, DateTime.Now,DateTime.Now.AddDays(1),false,"Room 1");           


          this.CalendarPanel1.EventStore.DataSource = events;
          this.CalendarPanel1.EventStore.DataBind();
   
        }
    }


    [DirectMethod(Namespace = "CompanyX")]
    public void ShowMsg(string msg)
    {
        X.Msg.Notify("Message", msg).Show();
    }
</script>


<!DOCTYPE html>


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
  <form>
    <ext:ResourceManager runat="server" Namespace="CompanyX" />
        
        <ext:Viewport runat="server" Layout="Border">
            <Items>
                <ext:Panel 
                    runat="server" 
                    Height="35" 
                    Border="false" 
                    Region="North" 
                    Cls="app-header" 
                    BodyCls="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="Panel1" 
                    runat="server" 
                    Title="..." 
                    Layout="Border" 
                    Region="Center" 
                    Cls="app-center">
                    <Items>
                        <ext:Panel 
                            runat="server" 
                            Width="213"
                            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 runat="server">
                                    <Items>
                                        <ext:Button 
                                            runat="server" 
                                            Text="Save All Events" 
                                            Icon="Disk" 
                                            Handler="CompanyX.record.saveAll" 
                                            />
                                    </Items>
                                </ext:Toolbar>
                            </TopBar>
                        </ext:Panel>
                        
                        <ext:CalendarPanel
                            ID="CalendarPanel1" 
                            runat="server"
                            Region="Center"
                            ActiveIndex="2"
                            Border="false">
                            <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 
                                runat="server" 
                                ShowHeader="true" 
                                ShowWeekLinks="true" 
                                ShowWeekNumbers="true" 
                                />  
                            <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>
                          <EventStore runat="server" IgnoreExtraFields="false" />
                        </ext:CalendarPanel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
        
        <ext:EventWindow 
            ID="EventWindow1" 
            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>
    Still no calendar and page is blank.
    Last edited by jmilton; Jun 10, 2015 at 1:58 PM.
  5. #5
    Jun 10, 2015, 7:49 PM
    Unfortunately, I cannot run both the examples. I have no DBConnMeth.

    Please provide a test case with some static data. Once we get it working with static data, it should be easier for you to get it working with a data base.

Similar Threads

  1. Calendar Panel Calendar Store
    By ozlem in forum 2.x Help
    Replies: 8
    Last Post: Apr 25, 2013, 8:02 AM
  2. Need to default Second calendar to start where first calendar left off??
    By RonaldR in forum 1.x Help
    Replies: 0
    Last Post: Jan 13, 2012, 2:33 PM
  3. [CLOSED] Calendar Event Custom back ground and fore ground without using Calendar Id
    By vedagopal2004 in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Apr 12, 2011, 3:13 PM
  4. Help with Calendar
    By PrasadJoshi in forum 1.x Help
    Replies: 1
    Last Post: Dec 15, 2010, 9:49 AM
  5. Where is the Calendar?
    By Scoops in forum Examples and Extras
    Replies: 1
    Last Post: Oct 23, 2010, 8:11 PM

Tags for this Thread

Posting Permissions