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

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/

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:



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

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.

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?

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:



The 0 for top and bottom can be changed into some other value, like 20px or something.

Centering a Coffeecup Web Calendar.

Adjust the width to your needs.

Auto adjust the start date of your calendar to today's date.