# X-mas calendar (need help configurate)

**URL:** <https://forum.kirupa.com/t/x-mas-calendar-need-help-configurate/209140>\
**Category:** programming\
**Created:** [December 6, 2006, 8:31am UTC](https://forum.kirupa.com/t/x-mas-calendar-need-help-configurate/209140 "2006-12-06T08:31:04Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![MrH2o](https://avatars.discourse-cdn.com/v4/letter/m/a9a28c/32.png) [@MrH2o](https://forum.kirupa.com/u/MrH2o)\
**Post date:** [December 6, 2006, 8:31am UTC](https://forum.kirupa.com/t/x-mas-calendar-need-help-configurate/209140/1 "2006-12-06T08:31:04Z")

</div>

Hello!

I have a X-mas calendar on my page but I want to make some small changes.

Today it works like the current date and the date before it are using the same CSS styles, the days after however has it own style so you know that this “doors” isn’t open.

I would like to be enable to set diffrent styles on all 3 (current date, future dates and past dates) but I have no idea how to.

Here’s the php code  
\*\*

xmascalendar.php\*\*

```auto
<?php
    // Variables
    $pictureFolder='ups';
    $month=12;
    $clickableClass='done';
    $calendarID='calendar';
    $pictureID='pic';
    
    $banana = "yes";

    $d=preg_replace('/^0/','',date('d'));
    $selectedImage=$_GET['i'];
    
    if ($selectedImage > $d) {
        $selectedImage=25;
    }
    
    //$img=preg_match('/\d/',$selectedImage)?$selectedImage:'none';
    if(date('m')!=$month){$img=25;}
    if(date('m')!=$month){$d=-1;}
    
    
    $cal='<ul id="'.$calendarID.'">';
    for($i=1;$i<25;$i++)
    {
        $cal.= '<li>';
        $cal.= '<a '.($i<=$d?'class="'.$clickableClass.'"':'').'id="l'.$i.'" href="index.php?i='.($i<=$d?$i:25).'">';
        $cal.= '</a></li>';

    }
    $cal.='</ul>';
    $pic='<div id="'.$pictureID.'"><a href="index.php"><img src="'.$pictureFolder.'/'.$img.'.jpg" alt="Dagens vara" title="Dagens vara" '.$img.'" /></a></div>';
    //echo $selectedImage==''?$cal:$pic;
    
    if ($selectedImage !== null) {

        if ($selectedImage > 0 && $selectedImage < 27) {

        include("boxes/".$selectedImage.".php");
        }

    }
    

    else
    {
        echo $cal;
    }
?>

```

**show.php**

```auto

<?php
    $pictureFolder='ups';
    $month=12;
    $d=preg_replace('/^0/','',date('d'));
    $i=preg_match('/\d/',$_GET['i'])?$_GET['i']:'';
    $i=$i<=$d?$i:25;    
    $imgurl=$pictureFolder.'/'.$i.'.jpg';
?>

```

and **styles.css** (made it abit shorter)

```auto
        #calendar{
            background:url(background.gif) top left no-repeat #000;
            width:560px;
            height:700px;
            margin:auto;
            list-style:none;
            position:relative;
        }
        #pic{
            background:url(washout.jpg) top left no-repeat #000;
            width:560px;
            height:700px;
            margin:auto;
            list-style:none;
            position:relative;
        }
        #pic a img{
            display:block;
            margin:0 auto;
            border:2px solid #000;
        }
        #calendar li{
            list-style:none;
        }
        #calendar li a{
            border:1px dotted #000;
            display:block;    
            width:72px;
            height: 64px;
            color:#fff;    
            position:absolute;    
                background: url(open.gif);
        }
        #calendar li a.done{
        
            border:0px solid;
background:#AE2929;
            filter:alpha(opacity=70); -moz-opacity: 0.7; opacity:
0.7; -khtml-opacity: 0.7;                 
        }

        #calendar li a:hover{
            border: 1px solid #000;
            background: #fff;
            filter:alpha(opacity=40); -moz-opacity: 0.4; opacity:
0.4; -khtml-opacity: 0.4;
        }
    
            #lucka
            {
            position:absolute;
            top:77px;
            left:5px;
            float:left;
            }

            .dag
            {
            position:absolute;
            top:109px;
            left:143px;
            border: 1px;
            }

            .text
            {
            position:absolute;
            width: 560px;
            text-align:center;
            height: 60px;
            top:409px;            
            }

        
        /* =daylinks */

        #l1{
            left:427px;
            top:373px;
        }
        #l2{
            left:77px;
            top:68px;
        }

```

I would be really helpful if someone could help my out, since my PHP knowledge are very limited. Thanks in advance

/H2o