Results 1 to 21 of 21

Thread: [RESOLVED] [CSS/JAVASCRIPT]Calendar

  1. #1

    Thread Starter
    Lively Member
    Join Date
    Jul 2011
    Posts
    127

    Resolved [RESOLVED] [CSS/JAVASCRIPT]Calendar

    Someone help me how to create a calendar..

  2. #2
    Member PBertie's Avatar
    Join Date
    Aug 2011
    Location
    Newcastle Upon Tyne
    Posts
    55

    Re: [CSS/JAVASCRIPT]Calendar

    What do you have so far?

    I did one that uses a div positioned absolutley then I rewrite the days in a table each time you move through the months, screen shot included:
    Attached Images Attached Images  
    Last edited by PBertie; Aug 18th, 2011 at 12:09 PM. Reason: Attached Image didn't display

  3. #3

    Thread Starter
    Lively Member
    Join Date
    Jul 2011
    Posts
    127

    Re: [CSS/JAVASCRIPT]Calendar

    can you show me the code? what i did is a sample lay out using tables. but it is not interacting, the months cannot be move and the present date is not highlighted..

  4. #4
    Frenzied Member
    Join Date
    Apr 2009
    Location
    CA, USA
    Posts
    1,516

    Re: [CSS/JAVASCRIPT]Calendar

    There's about a bazillion of these already in existence if you just Google it...

    Or if you insist on rolling your own, you'll probably need to post the markup, styles and script that you're using for anyone to adequately help you.

  5. #5

    Thread Starter
    Lively Member
    Join Date
    Jul 2011
    Posts
    127

    Re: [CSS/JAVASCRIPT]Calendar

    Quote Originally Posted by SambaNeko View Post
    There's about a bazillion of these already in existence if you just Google it...

    Or if you insist on rolling your own, you'll probably need to post the markup, styles and script that you're using for anyone to adequately help you.

    yes! i want to create and design my own, what i have now is this,
    Code:
    <TABLE BORDER=3 CELLSPACING=3 CELLPADDING=3> 
    <TR>
    <TD COLSPAN="7" ALIGN=center><B>December 2001</B></TD> 
    </TR>
    
    <TR> 
    <TD COLSPAN="7" ALIGN=center><I>Another year comes to an end</I></TD>
    </TR>
    
    <TR> 
    <TD ALIGN=center>Sun</TD>
    <TD ALIGN=center>Mon</TD>
    <TD ALIGN=center>Tue</TD>
    <TD ALIGN=center>Wed</TD>
    <TD ALIGN=center>Thu</TD>
    <TD ALIGN=center>Fri</TD>
    <TD ALIGN=center>Sat</TD>
    </TR>
    
    <TR> 
    <TD ALIGN=center></TD>
    <TD ALIGN=center></TD>
    <TD ALIGN=center></TD>
    <TD ALIGN=center></TD>
    <TD ALIGN=center></TD>
    <TD ALIGN=center></TD>
    <TD ALIGN=center>1</TD>
    </TR>
    
    <TR> 
    <TD ALIGN=center>2</TD>
    <TD ALIGN=center>3</TD>
    <TD ALIGN=center>4</TD>
    <TD ALIGN=center>5</TD>
    <TD ALIGN=center>6</TD>
    <TD ALIGN=center>7</TD>
    <TD ALIGN=center>8</TD>
    </TR>
    
    <TR> 
    <TD ALIGN=center>9</TD>
    <TD ALIGN=center>10</TD>
    <TD ALIGN=center>11</TD>
    <TD ALIGN=center>12</TD>
    <TD ALIGN=center>13</TD>
    <TD ALIGN=center>14</TD>
    <TD ALIGN=center>15</TD>
    </TR>
    
    <TR> 
    <TD ALIGN=center>16</TD>
    <TD ALIGN=center>17</TD>
    <TD ALIGN=center>18</TD>
    <TD ALIGN=center>19</TD>
    <TD ALIGN=center>20</TD>
    <TD ALIGN=center>21</TD>
    <TD ALIGN=center>22</TD>
    </TR>
    
    <TR> 
    <TD ALIGN=center>23</TD>
    <TD ALIGN=center>24</TD>
    <TD ALIGN=center>25</TD>
    <TD ALIGN=center>26</TD>
    <TD ALIGN=center>27</TD>
    <TD ALIGN=center>28</TD>
    <TD ALIGN=center>29</TD>
    </TR>
    
    <TR> 
    <TD ALIGN=center>30</TD>
    <TD ALIGN=center>31</TD>
    <TD ALIGN=center></TD>
    <TD ALIGN=center></TD>
    <TD ALIGN=center></TD>
    <TD ALIGN=center></TD>
    <TD ALIGN=center></TD>
    
    </TR> 
    
    </TABLE>
    can you help me code the js? all i want is to make this interactive and ill handle for the design. helps will be appreciated. tnx

  6. #6
    PowerPoster
    Join Date
    Sep 2003
    Location
    Edmonton, AB, Canada
    Posts
    2,629

    Re: [CSS/JAVASCRIPT]Calendar

    This is a JavaScript Calendar class that I wrote. Here you can see it in action. The HTML is output from the class using its toString method, which can be modified to suit your needs. The styling is all done with CSS, though.
    Like Archer? Check out some Sterling Archer quotes.

  7. #7
    Member PBertie's Avatar
    Join Date
    Aug 2011
    Location
    Newcastle Upon Tyne
    Posts
    55

    Re: [CSS/JAVASCRIPT]Calendar

    I've uploaded a zip with all the files needed (.js, .css and .png's) also there is a html file which demonstrates it. Should give you a good start.

    The html file should explain its self quite well but it uses a wrapper function called my_UseCalendar() which isn't required but was useful for what I was using it for.

    By including the .js file you get a object named PB_Calendar. When you want to show the calendar use:
    Code:
    PB_Calendar.cal_UseCalendar(displayObj, displayDF, hiddenObj, hiddenDF, positionObj, positionTopOffset, positionLeftOffset, limitStart, limitEnd);
    displayObj should be the object to display the result (an input box).
    displayDF is the display format for the result (see bellow for possible values).
    hiddenObj is the same as displayObj but allows you to have a different format (if you dont need it pass null)
    hiddenDF is the format for the second object.
    positionObj is a object that the calendar should be displayed based on.
    positionTopOffset is how far vertically to offset the calendar from positionObj.
    positionLeftOffset is how far horizontally to offset the calendar from positionObj.
    limitStart is either -1, 0 or a date in dd/mm/yyyy format. -1 means no limit, 0 means today.
    limitEnd is either -1, 0 or a date in dd/mm/yyyy format. -1 means no limit, 0 means today.

    Supported Date Formats:
    dd/mm/yyyy
    dd-mm-yyyy
    d mmmm yyyy
    dd mmmm yyyy
    yyyy-mm-ddT00:00


    Notice that mmmm pulls the name of the month from PB_Calendar.cal_MonthsFormat[] so if you were to use it in another language you can replace the values in the array.
    Same goes for .cal_MonthsDisplay[] (Month name on the calendar box) & .cal_DaysHeader[] (Days of the week headers).

    @Kows: I looked at your calendar there but how does it select the dates?
    Attached Files Attached Files
    Last edited by PBertie; Aug 19th, 2011 at 03:48 PM. Reason: Missed off date formats

  8. #8
    Member PBertie's Avatar
    Join Date
    Aug 2011
    Location
    Newcastle Upon Tyne
    Posts
    55

    Re: [CSS/JAVASCRIPT]Calendar

    Haven't used my site for a while but just uploaded this example to it: http://www.etaxibooker.co.uk/CalendarDemo.htm
    Last edited by PBertie; Aug 19th, 2011 at 05:31 PM.

  9. #9
    PowerPoster
    Join Date
    Sep 2003
    Location
    Edmonton, AB, Canada
    Posts
    2,629

    Re: [CSS/JAVASCRIPT]Calendar

    Quote Originally Posted by PBertie View Post
    @Kows: I looked at your calendar there but how does it select the dates?
    You don't. No where in this post does the author say he wants to be able to select a date. He wanted to be able to change months and have the current date selected, which is exactly what my Calendar class allows.
    Like Archer? Check out some Sterling Archer quotes.

  10. #10
    Member PBertie's Avatar
    Join Date
    Aug 2011
    Location
    Newcastle Upon Tyne
    Posts
    55

    Re: [CSS/JAVASCRIPT]Calendar

    Quote Originally Posted by kows View Post
    You don't. No where in this post does the author say he wants to be able to select a date. He wanted to be able to change months and have the current date selected, which is exactly what my Calendar class allows.
    Sorry my mistake. Out of interest what sort of situations do you use your calendar in?

  11. #11
    PowerPoster
    Join Date
    Sep 2003
    Location
    Edmonton, AB, Canada
    Posts
    2,629

    Re: [CSS/JAVASCRIPT]Calendar

    Quote Originally Posted by PBertie View Post
    Sorry my mistake. Out of interest what sort of situations do you use your calendar in?
    I don't at all, actually. It was just me playing around with object-oriented programming concepts in JavaScript. I have a few other examples, including a form validator, an image gallery, a simple game, and a wrapper class for AJAX requests.
    Like Archer? Check out some Sterling Archer quotes.

  12. #12

    Thread Starter
    Lively Member
    Join Date
    Jul 2011
    Posts
    127

    Re: [CSS/JAVASCRIPT]Calendar

    tnx for the help guys.. i actually research a calendar code and i found one but it doesnt show up in my website when i try to use the code.

  13. #13
    PowerPoster
    Join Date
    Sep 2003
    Location
    Edmonton, AB, Canada
    Posts
    2,629

    Re: [CSS/JAVASCRIPT]Calendar

    That's great, but if you're asking for help with it then you'll need to provide some context.

    Either way, a few solutions have been posted here already -- any problem with using those?
    Like Archer? Check out some Sterling Archer quotes.

  14. #14

    Thread Starter
    Lively Member
    Join Date
    Jul 2011
    Posts
    127

    Re: [CSS/JAVASCRIPT]Calendar

    Quote Originally Posted by kows View Post
    That's great, but if you're asking for help with it then you'll need to provide some context.

    Either way, a few solutions have been posted here already -- any problem with using those?
    i tried to use your code but i dont know how to insert or use my css file. ill try it again once i get home.

  15. #15

    Thread Starter
    Lively Member
    Join Date
    Jul 2011
    Posts
    127

    Re: [CSS/JAVASCRIPT]Calendar

    Code:
    </div>
    <table>
          <tr>
            <td style="width: 20em">
              <div id="cont"></div>
            </td>
          </tr>
        </table>
        <script type="text/javascript"> 
          Calendar.setup({
                  cont          : "cont",
                  fdow          : 1,
                  selectionType : Calendar.SEL_MULTIPLE,
                  disabled      : function(date) {
                         
                          return (date.getDate() >= 5 &&
                                  date.getDate() <= 15);
                  },
    
    
                  checkRange    : function(date, cal) {
                          alert("Date " + date + " cannot be selected");
                  }
          });
       </script>
    </div>
    what's the problem with this codes? the calendar is not displayed in my site. i tried not to add this one in my site an create a html file and its working but after i insert this one, it no longer can be seen.

  16. #16
    PowerPoster
    Join Date
    Sep 2003
    Location
    Edmonton, AB, Canada
    Posts
    2,629

    Re: [CSS/JAVASCRIPT]Calendar

    I have no idea. Where did you find it? You're using some random code found online -- how are we supposed to know how it works?
    Like Archer? Check out some Sterling Archer quotes.

  17. #17

    Thread Starter
    Lively Member
    Join Date
    Jul 2011
    Posts
    127

    Re: [CSS/JAVASCRIPT]Calendar


  18. #18
    Frenzied Member
    Join Date
    Apr 2009
    Location
    CA, USA
    Posts
    1,516

    Re: [CSS/JAVASCRIPT]Calendar

    Well hopefully there's more than just that one block of script on your page if you expect that to work. Have you downloaded the latest release package from that site? It has a demo HTML file in it - take a look at that. Make sure you've included all necessary JS files.

    Also note that that particular calendar script is free for non-commercial usage only. Also "DHTML."

  19. #19

    Thread Starter
    Lively Member
    Join Date
    Jul 2011
    Posts
    127

    Re: [CSS/JAVASCRIPT]Calendar

    yes i have actually downloaded all the files and it is running, the problem is i dont understand why it is not showing in my site.

    here's the complete files that i am working on right now.
    Attached Files Attached Files

  20. #20

    Thread Starter
    Lively Member
    Join Date
    Jul 2011
    Posts
    127

    Re: [CSS/JAVASCRIPT]Calendar

    try to run the disabled.html file under the demo folder. that's what i want to put on my site..

  21. #21

    Thread Starter
    Lively Member
    Join Date
    Jul 2011
    Posts
    127

    Re: [CSS/JAVASCRIPT]Calendar

    thanks for the help guys... im done!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width