jquery - 谷歌喜欢日历事件 View 但水平界面

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

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

所以问题是:如何在不输入事件列值的情况下使日历 View 正常工作？

这是日历的代码和 View ；

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

这是这个类的 css 规则。

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

然后根据事件的开始日期，每个事件 div 都有“top”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>

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

当我使“事件 div” float 时，图片中的事件占用 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>

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

最佳答案

您可能会找到 Fullcalendar减少工作量。

关于jquery - 谷歌喜欢日历事件 View 但水平界面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9100994/

jquery - 谷歌喜欢日历事件 View 但水平界面

上一篇：html - 图像大小为 100% 的图像贴图

下一篇：jquery - 使用页面特定 URL 和 addClass 到 href 的 Sprites 主动导航