How do I add a calender on my website?

  • 1
  • Question
  • Updated 6 years ago
  • Answered
HI all

I've build my own website and would like to add a calender on this. Can anyone please advice how to do this please? Is there a tool/feature on the yola webpage that I can use to do this? Someone told me that Calender should come standard and I should be able to add it on. Can you please help/
Thanks
Emmy
Photo of Emmy B

Emmy B

  • 4 Posts
  • 0 Reply Likes

Posted 6 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Emmy,

A simple calendar can be added as a Google Gadget. This is accessible under
Widget Collections > Google Gadget > Tools > (select a calendar from the options)
Photo of Crystal

Crystal, Champion

  • 250 Posts
  • 79 Reply Likes
Hello Emmy, Here is some javascript code that will make an image of the prior month, the current month and the next month:

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var flg = 0;
var fs = 1;
var bg = "cyan";
M = new Array("January","February",
"March","April","May","June",
"July","August","September",
"October","November","December");
D = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat");
function getBgn() {
pdy = new Date(); // today
pmo = pdy.getMonth(); // present month
pyr = pdy.getYear(); // present year
if (pyr < 2000) // Y2K Fix, Isaac Powell
pyr = pyr + 1900; // http://onyx.idbsu.edu/~ipowell
yr = yr1 = (pmo==0?pyr-1:pyr); // last month's year
mo = (pmo==0?11:pmo-1); // last month
bgn = new Date(M[mo]+" 1,"+yr1); // assign to date
document.write('<TABLE BORDER=0><TR><TD VALIGN=TOP>');
Calendar(); // Send last month to screen
document.write('</TD><TD VALIGN=TOP>');
yr = pyr; // present year
mo = pmo; // present month
bgn = new Date(M[mo]+" 1,"+yr); // assign to date
Calendar(); // Send this month to screen
document.write('</TD><TD VALIGN=TOP>');
yr = (pmo==11?pyr+1:pyr); // next month's year
mo = (pmo==11?0:pmo+1); // next month
bgn = new Date(M[mo]+" 1,"+yr); // assign to date
Calendar(); // Send next month to screen
document.write('</TD></TR></TABLE>'); // Finish up
}
function Calendar(){
dy = bgn.getDay();
yr = eval(yr);
d = "312831303130313130313031";
if (yr / 4 == Math.floor(yr / 4)) {
d = d.substring(0, 2) + "29" + d.substring(4, d.length);
}
pos = (mo * 2);
ld = eval(d.substring(pos, pos + 2));
document.write("<TABLE BORDER=1"
+ " BGCOLOR='" + bg
+ "'><TR><TD ALIGN=CENTER COLSPAN=7>"
+ "<FONT SIZE=" + fs + ">" + M[mo] + " " + yr
+ "</FONT></TD></TR><TR><TR>");
for (var i = 0;i < 7;i ++) {
document.write("<TD ALIGN=CENTER>"
+"<FONT SIZE=1>" + D[i] + "</FONT></TD>");
}
document.write("</TR><TR>");
ctr = 0;
for (var i = 0;i < 7; i++){
if (i < dy) {
document.write("<TD ALIGN=CENTER>"
+"<FONT SIZE=" + fs + "> </FONT>"
+"</TD>");
}
else {
ctr++;
document.write("<TD ALIGN=CENTER>"
+ "<FONT SIZE=" + fs + ">" + ctr + "</FONT>"
+ "</TD>");
}
}
document.write("</TR><TR>");
while (ctr < ld) {
for (var i = 0;i < 7; i++){
ctr++;
if (ctr > ld){
document.write("<TD ALIGN=CENTER>"
+ " </TD>");
}
else {
document.write("<TD ALIGN=CENTER>"
+ "<FONT SIZE=" + fs + ">" + ctr + "</FONT>"
+ "</TD>");
}
}
document.write("</TR><TR>");
}
document.write("</TR></TABLE>");
}
// End -->
</SCRIPT>

<CENTER>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
getBgn();
// End -->
</SCRIPT>
</CENTER>

Photo of Emmy B

Emmy B

  • 4 Posts
  • 0 Reply Likes
Thank you both. I will try Gop's first, because the second one seem very complicated. I need to be able to plan my lessons so people can see what its available when.
Photo of Emmy B

Emmy B

  • 4 Posts
  • 0 Reply Likes
HI I've tried it and it works. However, I cant add any bookings on the diary.

I teach people how to sew and I'd like to add the type and time of lesson on the calender. I also like to be able to update the calender on a regular basis as I'm always adding new classes on my site.
At the moment its just showing me a calender.

Thanks
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Emmy,

Try Google Calendar.

This allows for updates of your calendar in a comprehensive and an enhanced way. It will also allow for dynamic updating by synchronising with a calendar on your computer but not a requirement for operation. Google Calendar is a very elegant and comprehensive tool which is easy to use.

The process for embedding this calendar in your website is given in a tutorial: Embed on your website. You can create this with confidence but just step through the process deliberately one step at a time.

Happy to take you through this if you would like to develop this.