Google, как календарь событий, но горизонтальный интерфейс - PullRequest
Новая
       2

Google, как календарь событий, но горизонтальный интерфейс

1 голос
/ 01 февраля 2012

Я пытаюсь создать представление календаря для событий. До моих испытаний это представление событий обрабатывалось распечаткой из основного представления календаря, распечатками каждого окна событий и вырезкой / вставкой событий в большой календарь.

Моя задача состояла в том, чтобы сделать этот процесс менее болезненным и сэкономить много бумаги и времени. До сих пор мне удается создать календарь просмотра и макет событий на конкретную дату. Но они все равно должны вручную определить столбец события.

Итак, вопрос: как сделать так, чтобы представление календаря работало без ввода значения столбца событий?

Вот код и вид календаря;

Каждое событие - это класс div с именем event.

Вот правило 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>

Я могу рассчитать «верхнее» значение, это не проблема. Проблема в «левом» значении. В идеале каждый блок должен сдвигаться влево и занимать 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 Ответ

1 голос
/ 01 февраля 2012

Возможно, вы найдете Fullcalendar намного менее трудоемким.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...