谷歌喜欢日历事件视图但水平界面

时间：2012-02-01 18:13:23

标签： jquery html css calendar

我正在尝试为事件创建日历视图。在我的试用之前，这个事件视图是通过打印出主日历视图，打印每个事件框以及将事件剪切/粘贴到大日历上来处理。

我的挑战是让这个过程减少痛苦，节省大量的纸张和时间。到目前为止，我设法在特定日期创建事件的日历视图和布局。但是他们仍然需要手动决定事件的列。

所以问题是：如何在不输入事件的列值的情况下使日历视图有效？

以下是日历的代码和视图;

每个事件都是一个名为event的div类。

以下是此课程的CSS规则。

.event{
    float: left;
    position: absolute;
    width: 148px;
    z-index:1;
    border-left: 1px solid #bbb;
    border-right: 1px solid #bbb;
}

然后根据事件的开始日，每个事件div都有“最高”的css值。 “顶部”值的计算基于日历的开始日期和每行的高度。所以第一个事件看起来像这样。

<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>

我可以计算出“顶部”值，这不是问题所在。问题是“左”值。理想情况下，每个框必须向左滑动并占据1列，下一个框必须从下一列开始。

当我使“事件div”浮动时，图片中的事件占据11列而不是5列。

所以我如何实现下面的事件布局是，每个事件在后端都有一个列值。这样用户就可以控制在日历列上替换该事件的位置。 “左”值基于事件的列值确定。

我的问题是：如何计算事件div的左值？

提前致谢

<!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>

以下是日历视图的链接 http://s1051.photobucket.com/albums/s421/Traim_Latey/?action=view&current=Screenshot2012-02-01at123753PM.png

1 个答案:

答案 0 :(得分：1)

您可能会发现Fullcalendar工作量少得多。

相关问题
最新问题