I am trying to create a calendar view for events. Before my trials this event view was handling by print out of the main calendar view, print outs of each event box and cut/paste of the events on to big calendar.
My challenge was to make this process less painful and save lots of paper and time. So far I manage to create the calendar view and layout of the events on the specific date. But they still have to manually decide the column of the event.
So the question is: how can I make the calendar view works without entering the column value of the events?
Here is the code and the view of the calendar;
Each event is a div class called event.
Here is the css rule for this class.
.event{
float: left;
position: absolute;
width: 148px;
z-index:1;
border-left: 1px solid #bbb;
border-right: 1px solid #bbb;
}
And then based on the starting day of the event each event div has “top” css value. Calculation of the “top” value is based on the beginning date of the calendar and each row’s height. So the first event looks like this.
<div class="event" style="background:#009900;top:20px;height:180px;left:245px;"><div class="eventday header">2078 - Event</div><div class="eventday">1. day event item</div><div class="eventday">2. day event item</div><div class="eventday">3. day event item</div><div class="eventday">4. day event item</div><div class="eventday">5. day event item</div><div class="eventday">6. day event item</div><div class="eventday">7. day event item</div><div class="eventday">8. day event item</div></div>
I can calculate the “top” value, this is not the problem. The problem is the “left” value. Ideally, each box has to slide left and occupy 1 column and the next box has to start from the next column.
When I make the “event div”s float the events in the picture occupy 11 column instead of 5 columns.
So how I achieve the below event layout is, each event also have a column value on the backend. So that user can control where to replace that event on the calendar columns. The “left” value is determined based on the column value of the event.
My question is: how can I calculate the left value of the event div?
Thanks in advance
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Events</title>
<style>
body{
color: #000000;
font-family: Arial,Sans;
font-size: 13px;
line-height: 19px;
padding: 0 0 0 70px;
text-align: left;
width:5000px;
}
.cal{
left: 0;
position: absolute;
top: 0;
width: 5000px;
}
.dayrow{ border-bottom: 1px solid #EFEFEF;
height: 19px;
}
.dayrow:hover{background:#000;opacity:0.2;}
.header{font-weight:bold;}
.date{
background: none repeat scroll 0 0 #EFEFEF;
font-weight: bold;
height: 100%;
padding: 0 5px 0 0;
text-align: right;
width: 90px;
}
.columnOK{height:19px;width: 149px; border-right: 1px solid #bbb;float:left;}
.event{
float: left;
position: absolute;
width: 148px;
z-index:1;
border-left: 1px solid #bbb;
border-right: 1px solid #bbb;
}
.eventday{border-bottom: 1px solid #EFEFEF;
height: 19px;
padding: 0 5px;
}
.eventday:hover{background:#ccc;color:#000;}
</style>
</head>
<body>
<div class="event" style="background:#009900;top:20px;height:180px;left:245px;"><div class="eventday header">2078 - Event</div><div class="eventday">1. day event item</div><div class="eventday">2. day event item</div><div class="eventday">3. day event item</div><div class="eventday">4. day event item</div><div class="eventday">5. day event item</div><div class="eventday">6. day event item</div><div class="eventday">7. day event item</div><div class="eventday">8. day event item</div></div>
<div class="event" style="background:#FFFF00;top:100px;height:180px;left:95px;"><div class="eventday header">2005 - Event</div><div class="eventday">1. day event item</div><div class="eventday">2. day event item</div><div class="eventday">3. day event item</div><div class="eventday">4. day event item</div><div class="eventday">5. day event item</div><div class="eventday">6. day event item</div><div class="eventday">7. day event item</div><div class="eventday">8. day event item</div></div>
<div class="event" style="background:#003300;color:#fff;top:120px;height:160px;left:545px;"><div class="eventday header">2108 - Event</div><div class="eventday">1. day event item</div><div class="eventday">2. day event item</div><div class="eventday">3. day event item</div><div class="eventday">4. day event item</div><div class="eventday">5. day event item</div><div class="eventday">6. day event item</div><div class="eventday">7. day event item</div></div>
<div class="event" style="background:#003300;color:#fff;top:220px;height:200px;left:395px;"><div class="eventday header">2006 - Event</div><div class="eventday">1. day event item</div><div class="eventday">2. day event item</div><div class="eventday">3. day event item</div><div class="eventday">4. day event item</div><div class="eventday">5. day event item</div><div class="eventday">6. day event item</div><div class="eventday">7. day event item</div><div class="eventday">8. day event item</div><div class="eventday">9. day event item</div></div>
<div class="event" style="background:#003300;color:#fff;top:240px;height:260px;left:245px;"><div class="eventday header">2007 - Event</div><div class="eventday">1. day event item</div><div class="eventday">2. day event item</div><div class="eventday">3. day event item</div><div class="eventday">4. day event item</div><div class="eventday">5. day event item</div><div class="eventday">6. day event item</div><div class="eventday">7. day event item</div><div class="eventday">8. day event item</div><div class="eventday">9. day event item</div><div class="eventday">10. day event item</div><div class="eventday">11. day event item</div><div class="eventday">12. day event item</div></div>
<div class="event" style="background:#FF9999;top:340px;height:200px;left:545px;"><div class="eventday header">2008 - Event</div><div class="eventday">1. day event item</div><div class="eventday">2. day event item</div><div class="eventday">3. day event item</div><div class="eventday">4. day event item</div><div class="eventday">5. day event item</div><div class="eventday">6. day event item</div><div class="eventday">7. day event item</div><div class="eventday">8. day event item</div><div class="eventday">9. day event item</div></div>
<div class="event" style="background:#003300;color:#fff;top:360px;height:320px;left:695px;"><div class="eventday header">2010 - Event</div><div class="eventday">1. day event item</div><div class="eventday">2. day event item</div><div class="eventday">3. day event item</div><div class="eventday">4. day event item</div><div class="eventday">5. day event item</div><div class="eventday">6. day event item</div><div class="eventday">7. day event item</div><div class="eventday">8. day event item</div><div class="eventday">9. day event item</div><div class="eventday">10. day event item</div><div class="eventday">11. day event item</div><div class="eventday">12. day event item</div><div class="eventday">13. day event item</div><div class="eventday">14. day event item</div><div class="eventday">15. day event item</div></div>
<div class="event" style="background:#FF9999;top:360px;height:180px;left:95px;"><div class="eventday header">2011 - Event</div><div class="eventday">1. day event item</div><div class="eventday">2. day event item</div><div class="eventday">3. day event item</div><div class="eventday">4. day event item</div><div class="eventday">5. day event item</div><div class="eventday">6. day event item</div><div class="eventday">7. day event item</div><div class="eventday">8. day event item</div></div>
<div class="event" style="background:#FFFF00;top:540px;height:180px;left:95px;"><div class="eventday header">2103 - Event</div><div class="eventday">1. day event item</div><div class="eventday">2. day event item</div><div class="eventday">3. day event item</div><div class="eventday">4. day event item</div><div class="eventday">5. day event item</div><div class="eventday">6. day event item</div><div class="eventday">7. day event item</div><div class="eventday">8. day event item</div></div>
<div class="event" style="background:#FF3333;top:560px;height:180px;left:245px;"><div class="eventday header">2013 - Event</div><div class="eventday">1. day event item</div><div class="eventday">2. day event item</div><div class="eventday">3. day event item</div><div class="eventday">4. day event item</div><div class="eventday">5. day event item</div><div class="eventday">6. day event item</div><div class="eventday">7. day event item</div><div class="eventday">8. day event item</div></div>
<div class="event" style="background:#FF9999;top:620px;height:180px;left:395px;"><div class="eventday header">2014 - Event</div><div class="eventday">1. day event item</div><div class="eventday">2. day event item</div><div class="eventday">3. day event item</div><div class="eventday">4. day event item</div><div class="eventday">5. day event item</div><div class="eventday">6. day event item</div><div class="eventday">7. day event item</div><div class="eventday">8. day event item</div></div></div>
<div class="cal">
<div class="dayrow"><div class="date" style="float:left;">21 February</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">22 February</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">23 February</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">24 February</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">25 February</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">26 February</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">27 February</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">28 February</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">29 February</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;"> 1 March</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;"> 2 March</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;"> 3 March</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;"> 4 March</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;"> 5 March</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;"> 6 March</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;"> 7 March</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;"> 8 March</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;"> 9 March</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">10 March</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">11 March</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">12 March</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">13 March</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">14 March</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">15 March</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">16 March</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">17 March</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">18 March</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">19 March</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">20 March</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">21 March</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">22 March</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">23 March</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">24 March</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">25 March</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">26 March</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">27 March</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">28 March</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">29 March</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">30 March</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">31 March</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;"> 1 April</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;"> 2 April</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;"> 3 April</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;"> 4 April</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;"> 5 April</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
</div>
</body>
</html>
Here is the link to the calendar view
http://s1051.photobucket.com/albums/s421/Traim_Latey/?action=view¤t=Screenshot2012-02-01at123753PM.png
You might find Fullcalendar to be a lot less work.