Web Calendar Tips & Tricks - Post ID...

User 6573 Photo


Ambassador
2,649 posts

Share your tricks or tips for WEB CALENDAR (html/css version) with others!

This thread is for tricks and tips only - please no problem questions.

Have a problem or question then post in the Software Discussion thread, not here, so your question does not get overlooked.

Subscribe to this thread if you like to get emails on tips and Tricks people post

User 117361 Photo


Ambassador
6,076 posts

Quick & easy colour changes
(new web calendar, October 2010)

Until some new themes* (see end of post) and editing features become available, those of you who are not terribly "au fait" with coding might like a quick and simple trick to adapt one of the couple of default themes to your own needs.
    1.First, create a calendar and save the folder somewhere you will easily be able to find it. (Initially you need not add your events, but just a plain calendar to do your experimentation.)

    2.Duplicate the folder and give it a new name, eg. calendar 2 (just in case of accidents)

    3.Open an image editor or Windows Paint (eg.Photoshop, Gimp, Adobe Elements, Paint etc.)

    4.Find your duplicate calendar folder and open the images folder which is tucked inside.

    5.In your image editor open the footer background and month background images.

    6.Now experiment with editing colour/hue saturation and changes until you get your desired colour to fit in with your own web site colour scheme. This is possible in the more advanced image editors. If you are using Paint, just fill the image area with the colour of your choice. You will lose any shadow effects, but will nonetheless manage to colour match the footer and headings with your own site.

    7.Save the altered images and open up one of the html page files (in the calendar folder) in your favourite browser to check the effect. If the colour contrast for the text is poor, change the image colour again until you get a good contrast.

And all this without touching a line of code.

*Calendar themes already available
https://www.coffeecup.com/store/themes/web-calendar/
User 122279 Photo


Senior Advisor
14,447 posts

Positioning the calendar
(new calendar, Oct. 2010)

To move the calendar from the upper left corner to some other location on a web page, finding the correct css settings can be very tricky. There are two other, much easier, ways:

1. Create an iframe where you want the calendar to appear, set the dimensions to match those of the calendar, e.g. like this:

<iframe width="400px" height="600px"src="calendar.html"></iframe>


2. Create a floated div around the calendar, like this:

<div style="float: right; width: 400px;">calendar code goes here</div>
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 3 Photo


Administrator
1,371 posts

FYI: You really don't need to add another container to position a calendar. You can easily style the <div> that holds the calendar. The easiest way would be to add some inline CSS as Inger suggested. The better way would be to add a div#cc_webcalendar selector in your CSS file and add the positioning properties there.

One caveat of using an iframe is that it will load the calendar event popups in the iframe also, and depending on the size of your iframe, some of the event data might not be visible.

Of course you are all free to take the code and tweak it to your satisfaction. That's the main reason we decided to switch to using HTML, CSS, and Javascript; so you could hack away and have full control.

We're really excited to see all the creative ways you can use Web Calendar, so please post your hacks, styles, and other tips.
User 122279 Photo


Senior Advisor
14,447 posts

J, I had tried your solution before I wrote the above. Creating the div#cc_webcalendar {margin:auto;} makes the calendar move into the center of the page, leaving the events behind... I have also tried Jim's solution in a reply here: http://www.coffeecup.com/forums/web-cal … -calendar/ with the same result.

Right now I'm away from home, using an Eee laptop with Linux, using Bluefish Editor, and I tried to add to the style above div#cc_webcalendar {margin:auto; text-align:center;} which lead to the calendar moving left again, but the events are in the right position, more or less. But the browser I have here (FF2.0) gives a somewhat distorted view of the calendar, so It would be better if someone on a windows system could try this.

I'm aware of the problem with the event label when using an iframe, but at least the whole of the calendar gets moved in one piece. Also the floated div is working, but of course to position it you need something (e.g. another float) to let it float against

Maybe you could reveal what properties to put into the afore mentioned div?
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 122279 Photo


Senior Advisor
14,447 posts

Well, I found that inserting this into the css file: #cc_webcalendar {margin: 0 50%;} did it. It means that the calendar is centered. At least the events are moved along. One can play around with the %-age until one finds something that works for the site in question.

Here's a little more detail:

I inserted it into the file monthstyles.css as you see here:

/** base calendar styles **/
#cc_calendar a:link, a:visited{text-decoration:none; border-bottom:0px; color:#4f4c4d;}
#cc_calendar_container { position:relative; }
#cc_webcalendar {margin: 0 50%;}
#cc_webcalendar a:link, a:visited{text-decoration:none; border-bottom:0px; color:#000000;}


The 0 for top and bottom can be changed into some other value, like 20px or something.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 187934 Photo


Senior Advisor
20,181 posts
Online Now

Centering a Coffeecup Web Calendar.
Eric Rohloff (Rolly) wrote:
Give this a try.:)
<div align="center">
<!-- this is where the calendar's html will be inserted -->
<div id="cc_webcalendar" style="width:400px">
</div>
</div>

Adjust the width to your needs.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 187934 Photo


Senior Advisor
20,181 posts
Online Now

Auto adjust the start date of your calendar to today's date.
<!-- This is where the calendar HTML will be inserted -->
<div id="cc_webcalendar">
<p>Error, content did not load.</p>
</div>

<!-- this loads the calendar -->
<script type="text/javascript">
var maxdate=new Date("03/01/2013");
var currentTime = new Date()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var year = currentTime.getFullYear()
var mindate=new Date(month + "/" + day + "/" + year);
loadTodaysCalendar(mindate,maxdate,"calendar");
</script>
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.