Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    html calendar with previous months button

    I am trying to include the calendar below on my website which has hyperlinks for certain dates. Each month pdf newsletters are issued and I want to link them to the date they're issued on.

    I have to code below but the problem is I don't know how to include for the previous months or the next month when the month hyperlink is clicked on at the bottom of the calendar.

    I'd be very grateful for some help.

    <div class="widget"><h3>Calendar</h3><div id="calendar_wrap"><table width="251" id="wp-calendar">
    <caption>May 2012</caption>
    <thead>
    <tr>
    <th width="33" title="Monday" scope="col"><div align="left">M</div></th>
    <th width="28" title="Tuesday" scope="col"><div align="left">T</div></th>
    <th width="34" title="Wednesday" scope="col"><div align="left">W</div></th>
    <th width="38" title="Thursday" scope="col"><div align="left">T</div></th>
    <th width="28" title="Friday" scope="col"><div align="left">F</div></th>
    <th width="29" title="Saturday" scope="col"><div align="left">S</div></th>
    <th width="29" title="Sunday" scope="col"><div align="left">S</div></th>
    </tr>
    </thead>

    <tfoot>
    <tr>
    <td colspan="3" id="prev"><a href="http://www.mysite.com/2012/04"
    title="View News Letters for April 2012">&laquo; Apr</a></td>
    <td class="pad">&nbsp;</td>
    <td colspan="3" id="next" class="pad">&nbsp;</td>
    </tr>
    </tfoot>

    <tbody>
    <tr>
    <td colspan="1" class="pad">&nbsp;</td>
    <td> 1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
    </tr>
    <tr>
    <td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td>
    </tr>
    <tr>
    <td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
    </tr>
    <tr>
    <td>21</td><td
    id="today">22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td>
    </tr>
    <tr>
    <td>28</td><td>29</td><td>30</td><td>31</td>
    <td class="pad" colspan="3">&nbsp;</td>
    </tr>
    </tbody>
    </table></div></div>

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,614
    Thanks
    0
    Thanked 645 Times in 635 Posts
    To do it entirely with HTML you'd create a separate page for each month and simply set the next and previous month links to link to the appropriate page.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New to the CF scene
    Join Date
    May 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the reply. I need to keep the webpage static and just for the calendar to be interactive. I assume it's possible but I haven't got a clue as I'm not a developer. The website is for a startup school although the sites up and running am just trying to upgrade it...
    I looked at javascript solutions but could not find anything that covers what I need.

    If anyone would be kind enough to help me out would appreciate it.

  • #4
    Regular Coder
    Join Date
    Apr 2012
    Posts
    165
    Thanks
    1
    Thanked 39 Times in 39 Posts
    Here's a JS one which is pretty simple to install & set up (just customize to match your site). http://calendar.pikesys.com/ It has the ability to include photos, links, etc. in each day's field.
    Last edited by EpicWebDesign; 05-24-2012 at 06:05 PM.


  •  

    Posting Permissions

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