Loading ...
Sorry, an error occurred while loading the content.

How to place a box within the dateCell of a calendar. Satyen Sir. please help.

Expand Messages
  • platinum.farooq
    Hi satyen Sir, http://platinum.farooq.googlepages.com/sample.html I have created this calendar using YU Library.I need one help here sir, Whenever we click a
    Message 1 of 4 , May 31, 2008
    • 0 Attachment
      Hi satyen Sir,

      http://platinum.farooq.googlepages.com/sample.html

      I have created this calendar using YU Library.I need one help here
      sir, Whenever we click a date on this calendar a dialog will be
      opened(Displayed). On that dialog a text area will be there. whenever
      we enter sometext into the textarea on the dialog it should be placed
      in a small box(or we can call it as a label also but some text should
      be displayed there) and it should be placed on that particular date just
      like in Google Calendar.
      And another task is, we should be able to drag that small box from a
      particular date to any other date.
      please help me in this task sir.You only can help me to achieve this.
      please tell how can i achieve this functionality. Or atleast tell,
      What should I use to achieve this.. please
      And also when I click on the Create button which is on the Dialog the
      calendar is getting disappeared. How can make it visible all the time?
      please help me out..
      Thanking You sir,
      Farooq Pasha.

      The Following is the Code I've written ...

      <HTML>
      <HEAD>
      <!-- css -->
      <link rel="stylesheet" type="text/css"
      href="http://yui.yahooapis.com/2.5.2/build/fonts/fonts-min.css" />
      <link rel="stylesheet" type="text/css"
      href="http://yui.yahooapis.com/2.5.2/build/container/assets/skins/sam/container.css">

      <link rel="stylesheet" type="text/css"
      href="http://yui.yahooapis.com/2.5.2/build/calendar/assets/skins/sam/calendar.css">

      <link rel="stylesheet" type="text/css"
      href="http://yui.yahooapis.com/2.5.2/build/button/assets/skins/sam/button.css"
      />
      <!-- js -->
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>

      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.5.2/build/calendar/calendar-min.js"></script>

      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.5.2/build/utilities/utilities.js"></script>

      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.5.2/build/button/button-min.js"></script>
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.5.2/build/container/container-min.js"></script>

      </HEAD>
      <BODY class="yui-skin-sam">
      <div id="calen"></div>
      <div id="myDialog">
      <div class="hd">Please Enter the Event</div>
      <div class="bd">
      <form name="DialogName">
      <label for="event">Event:</label>
      <textarea name="evententered"></textarea>
      </form>
      </div>
      <div class="fd"></div>
      </div>
      <script type="text/javascript">
      var handleSubmit = function()
      {
      var ent=myDialog.getData().evententered;
      document.write(ent);

      };

      var handleCancel = function()
      {
      this.cancel();
      };
      var calen=new YAHOO.widget.Calendar("calen");
      calen.cfg.setProperty("close",true);
      calen.cfg.setProperty("navigator",true);
      calen.render();
      calen.selectEvent.subscribe(handleSelect, calen, true);

      var myDialog=new YAHOO.widget.Dialog("myDialog",
      { width : "300px",
      fixedcenter : true,
      visible : false,
      modal: true,
      constraintoviewport : true,
      buttons : [ { text:"Create", handler:handleSubmit,
      isDefault:true },
      { text:"Cancel", handler:handleCancel } ]
      } );
      myDialog.render();

      function handleSelect(type,agrs,obj)
      {
      myDialog.cfg.setProperty("visible",true);


      }
      </script>
      </BODY>
      </HTML>
    • platinum.farooq
      Please reply.... Waiting For your reply.... Thanks, Farooq ... href= http://yui.yahooapis.com/2.5.2/build/container/assets/skins/sam/container.css ...
      Message 2 of 4 , Jun 1, 2008
      • 0 Attachment
        Please reply.... Waiting For your reply....
        Thanks,
        Farooq




        --- In ydn-javascript@yahoogroups.com, "platinum.farooq"
        <platinum.farooq@...> wrote:
        >
        > Hi satyen Sir,
        >
        > http://platinum.farooq.googlepages.com/sample.html
        >
        > I have created this calendar using YU Library.I need one help here
        > sir, Whenever we click a date on this calendar a dialog will be
        > opened(Displayed). On that dialog a text area will be there. whenever
        > we enter sometext into the textarea on the dialog it should be placed
        > in a small box(or we can call it as a label also but some text should
        > be displayed there) and it should be placed on that particular date just
        > like in Google Calendar.
        > And another task is, we should be able to drag that small box from a
        > particular date to any other date.
        > please help me in this task sir.You only can help me to achieve this.
        > please tell how can i achieve this functionality. Or atleast tell,
        > What should I use to achieve this.. please
        > And also when I click on the Create button which is on the Dialog the
        > calendar is getting disappeared. How can make it visible all the time?
        > please help me out..
        > Thanking You sir,
        > Farooq Pasha.
        >
        > The Following is the Code I've written ...
        >
        > <HTML>
        > <HEAD>
        > <!-- css -->
        > <link rel="stylesheet" type="text/css"
        > href="http://yui.yahooapis.com/2.5.2/build/fonts/fonts-min.css" />
        > <link rel="stylesheet" type="text/css"
        >
        href="http://yui.yahooapis.com/2.5.2/build/container/assets/skins/sam/container.css">
        >
        > <link rel="stylesheet" type="text/css"
        >
        href="http://yui.yahooapis.com/2.5.2/build/calendar/assets/skins/sam/calendar.css">
        >
        > <link rel="stylesheet" type="text/css"
        >
        href="http://yui.yahooapis.com/2.5.2/build/button/assets/skins/sam/button.css"
        > />
        > <!-- js -->
        > <script type="text/javascript"
        >
        src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
        >
        > <script type="text/javascript"
        >
        src="http://yui.yahooapis.com/2.5.2/build/calendar/calendar-min.js"></script>
        >
        > <script type="text/javascript"
        >
        src="http://yui.yahooapis.com/2.5.2/build/utilities/utilities.js"></script>
        >
        > <script type="text/javascript"
        >
        src="http://yui.yahooapis.com/2.5.2/build/button/button-min.js"></script>
        > <script type="text/javascript"
        >
        src="http://yui.yahooapis.com/2.5.2/build/container/container-min.js"></script>
        >
        > </HEAD>
        > <BODY class="yui-skin-sam">
        > <div id="calen"></div>
        > <div id="myDialog">
        > <div class="hd">Please Enter the Event</div>
        > <div class="bd">
        > <form name="DialogName">
        > <label for="event">Event:</label>
        > <textarea name="evententered"></textarea>
        > </form>
        > </div>
        > <div class="fd"></div>
        > </div>
        > <script type="text/javascript">
        > var handleSubmit = function()
        > {
        > var ent=myDialog.getData().evententered;
        > document.write(ent);
        >
        > };
        >
        > var handleCancel = function()
        > {
        > this.cancel();
        > };
        > var calen=new YAHOO.widget.Calendar("calen");
        > calen.cfg.setProperty("close",true);
        > calen.cfg.setProperty("navigator",true);
        > calen.render();
        > calen.selectEvent.subscribe(handleSelect, calen, true);
        >
        > var myDialog=new YAHOO.widget.Dialog("myDialog",
        > { width : "300px",
        > fixedcenter : true,
        > visible : false,
        > modal: true,
        > constraintoviewport : true,
        > buttons : [ { text:"Create", handler:handleSubmit,
        > isDefault:true },
        > { text:"Cancel", handler:handleCancel } ]
        > } );
        > myDialog.render();
        >
        > function handleSelect(type,agrs,obj)
        > {
        > myDialog.cfg.setProperty("visible",true);
        >
        >
        > }
        > </script>
        > </BODY>
        > </HTML>
        >
      • Satyen Desai
        Hi, Here s something I put together really quickly. It s really rough, - the markup and CSS for the table/cell contents needs to be modified - but you re
        Message 3 of 4 , Jun 6, 2008
        • 0 Attachment
          Hi,
          Here's something I put together really quickly. It's really rough, - the markup and CSS for the table/cell contents needs to be modified - but you're welcome to use it as a starting point. Mainly it should give you an idea of how you can use the renderer infrastructure with an external data hash, to populate the event info.

          http://yuiblog.com/sandbox/yui/v252/examples/calendar/eventCalendar.html

          I'll probably spend some time in between things to clean it up, maybe create a formal Calendar example out of it.

          Regards,
          Satyen

          ________________________________________
          From: ydn-javascript@yahoogroups.com [mailto:ydn-javascript@yahoogroups.com] On Behalf Of platinum.farooq
          Sent: Sunday, June 01, 2008 9:40 AM
          To: ydn-javascript@yahoogroups.com
          Subject: [ydn-javascript] Re: How to place a box within the dateCell of a calendar. Satyen Sir. please h

          Please reply.... Waiting For your reply....
          Thanks,
          Farooq

          --- In ydn-javascript@yahoogroups.com, "platinum.farooq"
          <platinum.farooq@...> wrote:
          >
          > Hi satyen Sir,
          >
          > http://platinum.farooq.googlepages.com/sample.html
          >
          > I have created this calendar using YU Library.I need one help here
          > sir, Whenever we click a date on this calendar a dialog will be
          > opened(Displayed). On that dialog a text area will be there. whenever
          > we enter sometext into the textarea on the dialog it should be placed
          > in a small box(or we can call it as a label also but some text should
          > be displayed there) and it should be placed on that particular date just
          > like in Google Calendar.
          > And another task is, we should be able to drag that small box from a
          > particular date to any other date.
          > please help me in this task sir.You only can help me to achieve this.
          > please tell how can i achieve this functionality. Or atleast tell,
          > What should I use to achieve this.. please
          > And also when I click on the Create button which is on the Dialog the
          > calendar is getting disappeared. How can make it visible all the time?
          > please help me out..
          > Thanking You sir,
          > Farooq Pasha.
          >
          > The Following is the Code I've written ...
          >
          > <HTML>
          > <HEAD>
          > <!-- css -->
          > <link rel="stylesheet" type="text/css"
          > href="http://yui.yahooapis.com/2.5.2/build/fonts/fonts-min.css" />
          > <link rel="stylesheet" type="text/css"
          >
          href="http://yui.yahooapis.com/2.5.2/build/container/assets/skins/sam/container.css">
          >
          > <link rel="stylesheet" type="text/css"
          >
          href="http://yui.yahooapis.com/2.5.2/build/calendar/assets/skins/sam/calendar.css">
          >
          > <link rel="stylesheet" type="text/css"
          >
          href="http://yui.yahooapis.com/2.5.2/build/button/assets/skins/sam/button.css"
          > />
          > <!-- js -->
          > <script type="text/javascript"
          >
          src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
          >
          > <script type="text/javascript"
          >
          src="http://yui.yahooapis.com/2.5.2/build/calendar/calendar-min.js"></script>
          >
          > <script type="text/javascript"
          >
          src="http://yui.yahooapis.com/2.5.2/build/utilities/utilities.js"></script>
          >
          > <script type="text/javascript"
          >
          src="http://yui.yahooapis.com/2.5.2/build/button/button-min.js"></script>
          > <script type="text/javascript"
          >
          src="http://yui.yahooapis.com/2.5.2/build/container/container-min.js"></script>
          >
          > </HEAD>
          > <BODY class="yui-skin-sam">
          > <div id="calen"></div>
          > <div id="myDialog">
          > <div class="hd">Please Enter the Event</div>
          > <div class="bd">
          > <form name="DialogName">
          > <label for="event">Event:</label>
          > <textarea name="evententered"></textarea>
          > </form>
          > </div>
          > <div class="fd"></div>
          > </div>
          > <script type="text/javascript">
          > var handleSubmit = function()
          > {
          > var ent=myDialog.getData().evententered;
          > document.write(ent);
          >
          > };
          >
          > var handleCancel = function()
          > {
          > this.cancel();
          > };
          > var calen=new YAHOO.widget.Calendar("calen");
          > calen.cfg.setProperty("close",true);
          > calen.cfg.setProperty("navigator",true);
          > calen.render();
          > calen.selectEvent.subscribe(handleSelect, calen, true);
          >
          > var myDialog=new YAHOO.widget.Dialog("myDialog",
          > { width : "300px",
          > fixedcenter : true,
          > visible : false,
          > modal: true,
          > constraintoviewport : true,
          > buttons : [ { text:"Create", handler:handleSubmit,
          > isDefault:true },
          > { text:"Cancel", handler:handleCancel } ]
          > } );
          > myDialog.render();
          >
          > function handleSelect(type,agrs,obj)
          > {
          > myDialog.cfg.setProperty("visible",true);
          >
          >
          > }
          > </script>
          > </BODY>
          > </HTML>
          >
        • cheunghien84
          Hi, My name is Hien Truong. I m a new one on YUI Calendar. Thanks for your Calendar, it really help me a lot. I would like to know how to display a
          Message 4 of 4 , Jul 2, 2008
          • 0 Attachment
            Hi,

            My name is Hien Truong. I'm a new one on YUI Calendar.
            Thanks for your Calendar, it really help me a lot.
            I would like to know how to display a Weekly/Hourly calendar when we
            click on each cell of Month Calendar. Then, we choose a hour slot on
            Weekly/Hourly, the time will be added to Month Calendar.

            Very deeply thanks for your help.

            Thanks,
            HienTruong


            --- In ydn-javascript@yahoogroups.com, "Satyen Desai" <sdesai@...> wrote:
            >
            > Hi,
            > Here's something I put together really quickly. It's really rough, -
            the markup and CSS for the table/cell contents needs to be modified -
            but you're welcome to use it as a starting point. Mainly it should
            give you an idea of how you can use the renderer infrastructure with
            an external data hash, to populate the event info.
            >
            > http://yuiblog.com/sandbox/yui/v252/examples/calendar/eventCalendar.html
            >
            > I'll probably spend some time in between things to clean it up,
            maybe create a formal Calendar example out of it.
            >
            > Regards,
            > Satyen
            >
            > ________________________________________
            > From: ydn-javascript@yahoogroups.com
            [mailto:ydn-javascript@yahoogroups.com] On Behalf Of platinum.farooq
            > Sent: Sunday, June 01, 2008 9:40 AM
            > To: ydn-javascript@yahoogroups.com
            > Subject: [ydn-javascript] Re: How to place a box within the dateCell
            of a calendar. Satyen Sir. please h
            >
            > Please reply.... Waiting For your reply....
            > Thanks,
            > Farooq
            >
            > --- In ydn-javascript@yahoogroups.com, "platinum.farooq"
            > <platinum.farooq@> wrote:
            > >
            > > Hi satyen Sir,
            > >
            > > http://platinum.farooq.googlepages.com/sample.html
            > >
            > > I have created this calendar using YU Library.I need one help here
            > > sir, Whenever we click a date on this calendar a dialog will be
            > > opened(Displayed). On that dialog a text area will be there. whenever
            > > we enter sometext into the textarea on the dialog it should be placed
            > > in a small box(or we can call it as a label also but some text should
            > > be displayed there) and it should be placed on that particular
            date just
            > > like in Google Calendar.
            > > And another task is, we should be able to drag that small box from a
            > > particular date to any other date.
            > > please help me in this task sir.You only can help me to achieve this.
            > > please tell how can i achieve this functionality. Or atleast tell,
            > > What should I use to achieve this.. please
            > > And also when I click on the Create button which is on the Dialog the
            > > calendar is getting disappeared. How can make it visible all the time?
            > > please help me out..
            > > Thanking You sir,
            > > Farooq Pasha.
            > >
            > > The Following is the Code I've written ...
            > >
            > > <HTML>
            > > <HEAD>
            > > <!-- css -->
            > > <link rel="stylesheet" type="text/css"
            > > href="http://yui.yahooapis.com/2.5.2/build/fonts/fonts-min.css" />
            > > <link rel="stylesheet" type="text/css"
            > >
            >
            href="http://yui.yahooapis.com/2.5.2/build/container/assets/skins/sam/container.css">
            > >
            > > <link rel="stylesheet" type="text/css"
            > >
            >
            href="http://yui.yahooapis.com/2.5.2/build/calendar/assets/skins/sam/calendar.css">
            > >
            > > <link rel="stylesheet" type="text/css"
            > >
            >
            href="http://yui.yahooapis.com/2.5.2/build/button/assets/skins/sam/button.css"
            > > />
            > > <!-- js -->
            > > <script type="text/javascript"
            > >
            >
            src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
            > >
            > > <script type="text/javascript"
            > >
            >
            src="http://yui.yahooapis.com/2.5.2/build/calendar/calendar-min.js"></script>
            > >
            > > <script type="text/javascript"
            > >
            >
            src="http://yui.yahooapis.com/2.5.2/build/utilities/utilities.js"></script>
            > >
            > > <script type="text/javascript"
            > >
            >
            src="http://yui.yahooapis.com/2.5.2/build/button/button-min.js"></script>
            > > <script type="text/javascript"
            > >
            >
            src="http://yui.yahooapis.com/2.5.2/build/container/container-min.js"></script>
            > >
            > > </HEAD>
            > > <BODY class="yui-skin-sam">
            > > <div id="calen"></div>
            > > <div id="myDialog">
            > > <div class="hd">Please Enter the Event</div>
            > > <div class="bd">
            > > <form name="DialogName">
            > > <label for="event">Event:</label>
            > > <textarea name="evententered"></textarea>
            > > </form>
            > > </div>
            > > <div class="fd"></div>
            > > </div>
            > > <script type="text/javascript">
            > > var handleSubmit = function()
            > > {
            > > var ent=myDialog.getData().evententered;
            > > document.write(ent);
            > >
            > > };
            > >
            > > var handleCancel = function()
            > > {
            > > this.cancel();
            > > };
            > > var calen=new YAHOO.widget.Calendar("calen");
            > > calen.cfg.setProperty("close",true);
            > > calen.cfg.setProperty("navigator",true);
            > > calen.render();
            > > calen.selectEvent.subscribe(handleSelect, calen, true);
            > >
            > > var myDialog=new YAHOO.widget.Dialog("myDialog",
            > > { width : "300px",
            > > fixedcenter : true,
            > > visible : false,
            > > modal: true,
            > > constraintoviewport : true,
            > > buttons : [ { text:"Create", handler:handleSubmit,
            > > isDefault:true },
            > > { text:"Cancel", handler:handleCancel } ]
            > > } );
            > > myDialog.render();
            > >
            > > function handleSelect(type,agrs,obj)
            > > {
            > > myDialog.cfg.setProperty("visible",true);
            > >
            > >
            > > }
            > > </script>
            > > </BODY>
            > > </HTML>
            > >
            >
          Your message has been successfully submitted and would be delivered to recipients shortly.