Using different colors according to dates

Re: Using different colors according to dates

Postby peter » Tue May 27, 2008 8:12 pm

Yes. That is it :!:
Chris thank you a lot.

Peter.
peter
 
Posts: 7
Joined: Sat May 24, 2008 4:04 pm

Re: Using different colors according to dates

Postby chris » Tue May 27, 2008 8:23 pm

Good,

now, you might want to alter that so that it marks the selected item.
If your select list is within php code you could do this by changing the options to this:
Code: Select all
<option value="1" '; if(ID_ITEM==1) echo 'selected="selected"' echo '>item 1</option>
<option value="2" '; if(ID_ITEM==2) echo 'selected="selected"' echo '>item 2</option>
<option value="3" '; if(ID_ITEM==3) echo 'selected="selected"' echo '>item 3</option>
etc.

If you have placed the list outside php, you will need to use this:
Code: Select all
<option value="1" <?php if(ID_ITEM==1) echo 'selected="selected"'; ?> >item 1</option>
<option value="2" <?php if(ID_ITEM==2) echo 'selected="selected"; ?> >item 2</option>
<option value="3" <?php if(ID_ITEM==3) echo 'selected="selected"'; ?> >item 3</option>
etc.


Chris
User avatar
chris
Site Admin
 
Posts: 1089
Joined: Mon Dec 17, 2007 7:42 pm
Location: Málaga, Spain

Re: Using different colors according to dates

Postby peter » Tue Jun 03, 2008 10:30 am

Hello,

I didn't want to bother you with this but I couldn't do it myself so I have to ask you about update process.
Everything works fine unless I want to free a booked day. The picture dissapears completly.
It looks like I should add something in .js files to properly update current state with new prefixes.
I tried to make changes on my own but the picture still dissapears.

Peter.
peter
 
Posts: 7
Joined: Sat May 24, 2008 4:04 pm

Re: Using different colors according to dates

Postby chris » Tue Jun 03, 2008 11:28 am

Hi again,
Oh dear, you are right, of course we haven't told the ajax code to use the prefixes :(

We are going to have to update the following files:
includes/functions.inc.php
js/update_cal.js


Firstly in the "includes/functions.inc.php" file we will add the prefix to the onclick even.
Find this:
Code: Select all
onclick="ajax_mod_state(\''.$id.'\',\''.$this_date.'\',\''.$day_counter.'\',event); return false"

and replace with this:
Code: Select all
onclick="ajax_mod_state(\''.$id.'\',\''.$this_date.'\',\''.$day_counter.'\',event,\''.$prefix.'\'); return false"


Then open "js/update_cal.js" and to the following:

1. Towards the beginning of the file we define various objects. You need to add this one at the end of them BEFORE the first function:
Code: Select all
var the_prefix   =   new Object();

2. Add the prefix to the items receieved by the function so this:
Code: Select all
function ajax_mod_state(id_item,the_date,the_num,e){   

becomes this:
Code: Select all
function ajax_mod_state(id_item,the_date,the_num,e,prefix){   

3. We need to change the value of the object that we just created to hold this prefox value so, at the the beginning of the function ajax_mod_state add this line:
Code: Select all
the_prefix=prefix;

4. Finally we have to use this prefix in the reset_state() function where it actually updates the image, taking into account the prefix ONLY if the new state is off.
Code: Select all
function reset_state(){
   if (ajax.response=="on"
   ||  ajax.response=="off"
   ||  ajax.response=="am"
   ||  ajax.response=="pm"
   ){
         state_elm.innerHTML = "<img src='"+image_dir+"cal_"+ajax.response+"_"+elm_num+cal_num_img_type+"' width='"+num_w+"' height='"+num_h+"' border='0'/>";
   }else{
      alert(ajax.response);
   }
}

to this:
Code: Select all
function reset_state(){
   if (ajax.response=="on"
   ||  ajax.response=="am"
   ||  ajax.response=="pm"
   ){
      state_elm.innerHTML = "<img src='"+image_dir+"cal_"+ajax.response+"_"+elm_num+cal_num_img_type+"' width='"+num_w+"' height='"+num_h+"' border='0'/>";
   }else if(ajax.response=="off"){
      //   add prefix
      state_elm.innerHTML = "<img src='"+image_dir+the_prefix+"cal_"+ajax.response+"_"+elm_num+cal_num_img_type+"' width='"+num_w+"' height='"+num_h+"' border='0'/>";
   }else{
      alert(ajax.response);
   }
}


I hope that you can follow those steps and that it works ok for you - as always, let me know how it goes. ;)

Chris
User avatar
chris
Site Admin
 
Posts: 1089
Joined: Mon Dec 17, 2007 7:42 pm
Location: Málaga, Spain

Re: Using different colors according to dates

Postby peter » Wed Jun 04, 2008 11:50 am

Hello,

That was the part I tried unsuccesfuly to add. YES it is working now :)
THANK YOU for helping me :D

Peter.
peter
 
Posts: 7
Joined: Sat May 24, 2008 4:04 pm

Re: Using different colors according to dates

Postby Tom » Fri Jun 13, 2008 12:43 pm

Hi,

I'm a noob on this forum.
I was looking at the html source page of the calendar and it looks that all the .png's are placed in <td> tag.
I'd like to have even more flexibility then the calendar already gives (to change dates colors) and replace .png with empty table cells. The table cells would hold just a numbers generated by php code and cells colors would be changed via css.

I like the tweak made above (to hold season dates in table and seasons are in different colors)... It's great :!:
Could it be used along with the css? I mean holding in a table not only seasons dates but also a css color formating?
Could your calendar be adapted this way?

Tom.
Tom
 
Posts: 6
Joined: Fri Jun 13, 2008 11:54 am

Re: Using different colors according to dates

Postby chris » Fri Jun 27, 2008 2:21 pm

Hi there,
sorry about not answering this post when it was sent, it somehow slipped through my controls and I completly missed it :(

Converting the calendar to use background images and css for styling the actual dates is something that many people have requested and is high up on my "to-do" list. However, I have been very busy with work recently and have not had time to move this calendar on.

In answer to your main question, ie could the code above be adapted to use css rather than images and specifically the colors accoring to the dates, the answer would be yes.
Apart from the php changes that you would have to make to the main code to insert the numbers rather than the images, you would have to modify the javsacript so that rather than changing the image like this:
Code: Select all
state_elm.innerHTML = "<img src='"+image_dir+"cal_"+ajax.response+"_"+elm_num+cal_num_img_type+"' width='"+num_w+"' height='"+num_h+"' border='0'/>";

it would change the class something like this (not tested):
Code: Select all
state_elm.className= "cal_"+ajax.response;

where "cal_..." would be the name of your classes for each "season".
Clearly we don't have to worry about the numbers now as this will not be changed (you will probably have to remove the code that adds the "loading" image - unless we could use that as a backround image...... is that possible with css??? - worth a try ;) )

I realise that this isn't very clear but I hope that it will serve as a starting point for you to be able to have a go.

I will try to find time to do all this myself as it is the next logical step that the calendar needs to take anyway (ie use css rather than images) however, this being a hobby project and not generating much income, it always takes last place :(

Let me know if you get anywhere with this or if you need more specific help - I promise not to take so long in getting back to you :(

Chris
User avatar
chris
Site Admin
 
Posts: 1089
Joined: Mon Dec 17, 2007 7:42 pm
Location: Málaga, Spain

Re: Using different colors according to dates

Postby Tom » Fri Jun 27, 2008 3:45 pm

.
Last edited by Tom on Thu Aug 14, 2008 2:28 pm, edited 2 times in total.
Tom
 
Posts: 6
Joined: Fri Jun 13, 2008 11:54 am

Re: Using different colors according to dates

Postby Tom » Thu Jul 03, 2008 9:45 am

.
Last edited by Tom on Thu Aug 14, 2008 2:29 pm, edited 1 time in total.
Tom
 
Posts: 6
Joined: Fri Jun 13, 2008 11:54 am

Re: Using different colors according to dates

Postby Tom » Thu Aug 14, 2008 2:26 pm

Hi there,

I am working on using css as a seasons color definition functionality.
In my administration panel I've prepared a table for changing colors definitions.
I've made a table in database to store css colors like #00ff00 to use it then for seasons styling.
Nevertheless I'm still unable to generate calendar days without images. There are just empty cells in the calendar screaming for graphic content.
How can I obtain day numbers in calendar cells without images :?:

Tom.
Tom
 
Posts: 6
Joined: Fri Jun 13, 2008 11:54 am

PreviousNext

Return to General

Who is online

Users browsing this forum: No registered users and 1 guest

cron