Want Next Previous buttons added to my HTML Calendar

I am wondering how to add Previous and Next buttons/links to an HTML calendar so that i can scroll through the months of the year

Here is my HTML calendar code that i am using to build one Month:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Calendar 2013</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="date.created" content="2013-10-04">
<meta name="generator" content="HTML Calendar Maker 2.0">
<meta name="licensekey" content="">
<style type="text/css">
/* Styling for the title (Month and Year) of the calendar */
div.title {
    font: x-large Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    height: 40px;
    background-color: white;
    color: black;
    }
/* Styling for the footer */
div.footer {
    font: small Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    }
/* Styling for the overall table */
table {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
    }
/* Styling for the column headers (days of the week) */
th {
    padding: 0 0.5em;
    text-align: center;
    background-color:gray;
    color:white;
    }
/* Styling for the individual cells (days) */
td  {    
    font-size: medium;
    padding: 0.25em 0.25em;  
    width: 14%;
    height: 80px;
    text-align: left;
    vertical-align: top;
    }
/* Styling for the date numbers */
.date  {    
    font-size: large;
    padding: 0.25em 0.25em;  
    text-align: left;
    vertical-align: top;
    }
/* Class for individual days (coming in future release) */
.sun {
     color:red;
     }
/* Hide the month element (coming in future release) */
th.month {
    visibility: hidden;
    display:none;
    }
   
</style>
</head>
<body>
<div class="title">January 2013</div>
<table border="1">
<tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>
<tr><td><span class="date">&nbsp;</span></td><td><span class="date">&nbsp;</span></td><td><span class="date">1</span></td><td><span class="date">2</span></td><td><span class="date">3</span></td><td><span class="date">4</span></td><td><span class="date">5</span></td></tr>
<tr><td><span class="date">6</span></td><td><span class="date">7</span></td><td><span class="date">8</span></td><td><span class="date">9</span></td><td><span class="date">10</span><p>Test</p></td><td><span class="date">11</span></td><td><span class="date">12</span></td></tr>
<tr><td><span class="date">13</span></td><td><span class="date">14</span></td><td><span class="date">15</span></td><td><span class="date">16</span></td><td><span class="date">17</span></td><td><span class="date">18</span></td><td><span class="date">19</span></td></tr>
<tr><td><span class="date">20</span></td><td><span class="date">21</span></td><td><span class="date">22</span></td><td><span class="date">23</span></td><td><span class="date">24</span></td><td><span class="date">25</span></td><td><span class="date">26</span></td></tr>
<tr><td><span class="date">27</span></td><td><span class="date">28</span></td><td><span class="date">29</span></td><td><span class="date">30</span></td><td><span class="date">31</span></td><td><span class="date">&nbsp;</span></td><td><span class="date">&nbsp;</span></td></tr>
</table></html>
JuneaucountyAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Below is adding a simple link.  Now you have to make it do something.  What are you using for a calendar?  I have been using fullcalendar. http://arshaw.com/fullcalendar/

http://jsbin.com/AwEFiyU/1/edit?html,output
  <div class="calnav"><a href="#">&lt&lt Prev</a> <a href="#">Next &gt;&gt;</a></div>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Calendar 2013</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="date.created" content="2013-10-04">
<meta name="generator" content="HTML Calendar Maker 2.0">
<meta name="licensekey" content="">
<style type="text/css">
/* Styling for the title (Month and Year) of the calendar */
div.title {
    font: x-large Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    height: 40px;
    background-color: white;
    color: black;
    }
/* Styling for the footer */
div.footer {
    font: small Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    }
/* Styling for the overall table */
table {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
    }
/* Styling for the column headers (days of the week) */
th {
    padding: 0 0.5em;
    text-align: center;
    background-color:gray;
    color:white;
    }
/* Styling for the individual cells (days) */
td  {     
    font-size: medium;
    padding: 0.25em 0.25em;   
    width: 14%; 
    height: 80px;
    text-align: left;
    vertical-align: top;
    }
/* Styling for the date numbers */
.date  {     
    font-size: large;
    padding: 0.25em 0.25em;   
    text-align: left;
    vertical-align: top;
    }
/* Class for individual days (coming in future release) */
.sun {
     color:red;
     }
/* Hide the month element (coming in future release) */
th.month {
    visibility: hidden;
    display:none;
    }
   
</style>
</head>
<body>
<div class="title">January 2013</div>
  <div class="calnav"><a href="#">&lt&lt Prev</a> <a href="#">Next &gt;&gt;</a></div>
<table border="1">
<tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>
<tr><td><span class="date">&nbsp;</span></td><td><span class="date">&nbsp;</span></td><td><span class="date">1</span></td><td><span class="date">2</span></td><td><span class="date">3</span></td><td><span class="date">4</span></td><td><span class="date">5</span></td></tr>
<tr><td><span class="date">6</span></td><td><span class="date">7</span></td><td><span class="date">8</span></td><td><span class="date">9</span></td><td><span class="date">10</span><p>Test</p></td><td><span class="date">11</span></td><td><span class="date">12</span></td></tr>
<tr><td><span class="date">13</span></td><td><span class="date">14</span></td><td><span class="date">15</span></td><td><span class="date">16</span></td><td><span class="date">17</span></td><td><span class="date">18</span></td><td><span class="date">19</span></td></tr>
<tr><td><span class="date">20</span></td><td><span class="date">21</span></td><td><span class="date">22</span></td><td><span class="date">23</span></td><td><span class="date">24</span></td><td><span class="date">25</span></td><td><span class="date">26</span></td></tr>
<tr><td><span class="date">27</span></td><td><span class="date">28</span></td><td><span class="date">29</span></td><td><span class="date">30</span></td><td><span class="date">31</span></td><td><span class="date">&nbsp;</span></td><td><span class="date">&nbsp;</span></td></tr>
</table></html>

Open in new window

0
JuneaucountyAuthor Commented:
ok I saw that you created hyperlinks that say next previous but the issue i have is that i am not hosting my new website so i cant add links to point to a web address. I hope that makes sense. I am using http://freehtmlcalendar.com/index.html

I need html code that will point to section in the code (below is the january month):


</style>
</head>
<body>
<div class="title">January 2013</div>
<table border="1">
<tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>
<tr><td><span class="date">&nbsp;</span></td><td><span class="date">&nbsp;</span></td><td><span class="date">1</span></td><td><span class="date">2</span></td><td><span class="date">3</span></td><td><span class="date">4</span></td><td><span class="date">5</span></td></tr>
<tr><td><span class="date">6</span></td><td><span class="date">7</span></td><td><span class="date">8</span></td><td><span class="date">9</span></td><td><span class="date">10</span></td><td><span class="date">11</span></td><td><span class="date">12</span></td></tr>
<tr><td><span class="date">13</span></td><td><span class="date">14</span></td><td><span class="date">15</span></td><td><span class="date">16</span></td><td><span class="date">17</span></td><td><span class="date">18</span></td><td><span class="date">19</span></td></tr>
<tr><td><span class="date">20</span></td><td><span class="date">21</span></td><td><span class="date">22</span></td><td><span class="date">23</span></td><td><span class="date">24</span></td><td><span class="date">25</span></td><td><span class="date">26</span></td></tr>
<tr><td><span class="date">27</span></td><td><span class="date">28</span></td><td><span class="date">29</span></td><td><span class="date">30</span></td><td><span class="date">31</span></td><td><span class="date">&nbsp;</span></td><td><span class="date">&nbsp;</span></td></tr>


Then below this code i need February code so that when i click next it will go to this code:

</style>
</head>
<body>
<div class="title">February 2013</div>
<table border="1">
<tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>
<tr><td><span class="date">&nbsp;</span></td><td><span class="date">&nbsp;</span></td><td><span class="date">&nbsp;</span></td><td><span class="date">&nbsp;</span></td><td><span class="date">&nbsp;</span></td><td><span class="date">1</span></td><td><span class="date">2</span></td></tr>
<tr><td><span class="date">3</span></td><td><span class="date">4</span></td><td><span class="date">5</span></td><td><span class="date">6</span></td><td><span class="date">7</span></td><td><span class="date">8</span></td><td><span class="date">9</span></td></tr>
<tr><td><span class="date">10</span></td><td><span class="date">11</span></td><td><span class="date">12</span></td><td><span class="date">13</span></td><td><span class="date">14</span></td><td><span class="date">15</span></td><td><span class="date">16</span></td></tr>
<tr><td><span class="date">17</span></td><td><span class="date">18</span></td><td><span class="date">19</span></td><td><span class="date">20</span></td><td><span class="date">21</span></td><td><span class="date">22</span></td><td><span class="date">23</span></td></tr>
<tr><td><span class="date">24</span></td><td><span class="date">25</span></td><td><span class="date">26</span></td><td><span class="date">27</span></td><td><span class="date">28</span></td><td><span class="date">&nbsp;</span></td><td><span class="date">&nbsp;</span></td></tr>
</table>
<p><div class="footer">
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
The only way to do this the way you want is to make separate static pages for each month and year, then link to each static "month".  If you only had a few months to worry about this would be ok.  But if you want an infinite amount of months and years, you need to create your calendar on the fly and use some type of scripting to generate the calendar and data for any given day.

This is why I pointed you to fullcalendar, but there are others.  Where is your expertise in scripting?  js, jquery, php, asp(x)? none?  

Let's figure how we can make this work for you, but static calendars with infinite years and months is going to be a lot of work or near impossible.
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

JuneaucountyAuthor Commented:
Yeah i was thinking about just doing one to two years at a time.  I did look at fullcalendar but again wouldnt i need to upload those files to the webserver. I am not hosting my own web server so i cannot upload those files. I dont have expertise on scripting. None. Thank you for helping and being patient.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
It is just going to be too hard to do what you are thinking.  There are plenty of 3rd party calendar apps you can embed into your html.  

https://www.google.com/calendar 
You can embed your calendar https://support.google.com/calendar/answer/41207?hl=en
In the calendar list on the left, click the down-arrow next to the calendar you want to embed, and select Calendar settings. (Alternatively, click the Settings link at the bottom of the calendar list, then click the name of the calendar.)
Copy the iframe code displayed in the Embed This Calendar section.
Paste this code into your website to embed your calendar.
0
JuneaucountyAuthor Commented:
oh really... that stinks. haha its funny that you mentioned using google calendar because that was the first thing i tried. I used it for a few days and thought it was very nice and easy to use. The one major problem I have is that I would like to add calendar events with PDF attachments. Now i know you can add attachments with google calendar but you need to have a drive account. I dont want public users to have to sign up for that. Any other suggestions?
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
You can make a drive folder or file public for anybody.    I would suggest making your drive folders similar to your site like  /mysitename/public/calendar/   and everything in the calendar folder you can make public.    

You can choose both visiblity and access level
https://support.google.com/drive/answer/2494886?hl=en
0
JuneaucountyAuthor Commented:
If I decide to use Google Calendar and Drive to add public event calendar to my website, is there a way to make changes.

What if i want to add color or get rid of google advertisment.

I did find one website but dont like the layout either. Its http://www.instantcal.com/

Do you know of any other site that can use google calendar but make changes to the look of it?

Thanks
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
You will make those types of changes when editing your calendar.  I don't remember it showing ads when embedded on a site.  You may have to pay the $50 per year.  But I don't think that is needed.

I would take one step at a time.  First, create a sample calendar with google, then create a sample web page and embed the calendar.  I think you will see it will be free from ads.  Once you have that, work on changing the color.  https://support.google.com/calendar/answer/37227?hl=en
0
JuneaucountyAuthor Commented:
Thank you. Yes I already have been testing this calendar for a while and I would like to make some changes to it. Did you look at the website I sent last post? http://www.instantcal.com/

I like that view better but still would like to maybe look at different things I can do to improve Google Calendar for my site. Do you have any other suggestions?

When I embedded the google calendar into my site, it didnt really have ads but it says Google Calendar on the bottom. I know with the intsantcal website, it removes that and you can make further appearance changes which i like.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Did you see on the http://www.instantcal.com/ site,

*IMPORTANT*** InstantCal is no longer actively developed or maintained, and operates only on an as-available basis.

I use http://arshaw.com/fullcalendar/ with my own serverside code and database.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I have never used but these seem to be options for you

http://time.ly/
http://www.coffeecup.com/web-calendar/
0
JuneaucountyAuthor Commented:
After researching and talking with you, I could not find anything better than google calendar. I decided to use this and embed it on my website.

Thank you for your help
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Right, that was the answer I gave you http:a39546848
0
JuneaucountyAuthor Commented:
I was looking for something like google calendar without logo. I also wanted more flexability on changing the appearance. I dont know how to program or type code so i decided that with my experience that google calendar worked the best and was the easiest.

Thank you
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.