Существует ли календарь JavaScript с открытым исходным кодом, который поддерживает встроенное всплывающее окно с информацией о событии? - PullRequest
Новая
       2

Существует ли календарь JavaScript с открытым исходным кодом, который поддерживает встроенное всплывающее окно с информацией о событии?

3 голосов
/ 31 января 2012

В этом календаре Google, когда вы нажимаете на дату, в которой есть событие, всплывет информация о событии.

http://examples.tripod.com/calendar.html

Это то, что мне нужно (хотя его размернамного больше, чем мне нужно), но после поиска в Google, я понимаю, что с календарем Google есть большое ограничение.Нет простого способа настроить его стиль с помощью css, потому что встроенный календарь Google предоставляется внутри iframe.Существуют такие решения, как RESTYLEgc , но я не очень хочу к этому стремиться.

Сейчас я ищу календарь с открытым исходным кодом, который поддерживает встроенное всплывающее окно с подробной информацией о событиях.,Он может быть чрезвычайно простым, если он допускает навигацию по году / месяцу и может выделять дату, на которой есть событие, и, конечно, встроенную функцию всплывающих событий.

Это будетзамечательно, если он построен на jQuery, так как у меня уже есть библиотека jQuery, включенная на веб-сайте.

У меня очень мало важных событий, которые нужно установить в календаре, я ожидаю, что буду использовать такие коды: 

var event1Html='<div class="event-details">Some event details here</div>';
calendar.setEvent('2012-1-25',event1Html);

var event2Html='<div class="event-details">Some other event details here</div>';
calendar.setEvent('2012-1-31',event2Html);

Есть ли такой календарь на javascript, о котором вы знаете?

1 Ответ

6 голосов
/ 31 января 2012

Я бы заглянул в скрипт fullcalendar .Судя по всему, он может вводить календари Google, но также имеет событие eventClick, к которому можно привязать и (возможно) использовать jQuery-UI для отображения диалогового окна с дополнительной информацией.

Длядемо, сделайте следующее:

  1. Посетите этот сайт с полным календарем и загрузите последнюю версию (похоже, 1.5.2)
  2. Извлеките папку fullcalendar-1.5.2\fullcalendar-1.5.2\fullcalendar на рабочий стол.
  3. Создайте файл «calendardemo.html» на рабочем столе и вставьте в него следующее: 

<html>
  <head>
    <title>Calendar Demo</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>

    <link rel='stylesheet' type='text/css' href='fullcalendar/fullcalendar.css' />
    <link rel='stylesheet' type='text/css' href='fullcalendar/fullcalendar.print.css' media='print' />
    <script type='text/javascript' src='fullcalendar/fullcalendar.min.js'></script>

    <style type="text/css">
      body {
        margin-top: 40px;
        text-align: center;
        font-size: 14px;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
      }

      #calendar {
        width: 640px;
        margin: 0 auto;
      }
    </style>
  </head>



  <body>
    <div id="calendar"></div>
    <div class="ui-helper-hidden" id="calendar-details" title="Event Details">
      <p>Event details</p>
    </div>

    <script type="text/javascript">
      $(function(){
        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();

        var $dialog = $('#calendar-details').dialog({
          autoOpen: false,
          model: true,
          height: 300,
          width: 350
        });

        $('#calendar').fullCalendar({
          header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
          },
          editable: true,
          events: [
            {
              title: 'All Day Event',
              start: new Date(y, m, 1)
            },
            {
              title: 'Long Event',
              start: new Date(y, m, d-5),
              end: new Date(y, m, d-2)
            },
            {
              id: 999,
              title: 'Repeating Event',
              start: new Date(y, m, d-3, 16, 0),
              allDay: false
            },
            {
              id: 999,
              title: 'Repeating Event',
              start: new Date(y, m, d+4, 16, 0),
              allDay: false
            },
            {
              title: 'Meeting',
              start: new Date(y, m, d, 10, 30),
              allDay: false
            },
            {
              title: 'Lunch',
              start: new Date(y, m, d, 12, 0),
              end: new Date(y, m, d, 14, 0),
              allDay: false
            },
            {
              title: 'Birthday Party',
              start: new Date(y, m, d+1, 19, 0),
              end: new Date(y, m, d+1, 22, 30),
              allDay: false
            },
            {
              title: 'Click for Google',
              start: new Date(y, m, 28),
              end: new Date(y, m, 29),
              url: 'http://google.com/'
            }
          ],
          eventClick: function(event,jsEvent,view){
            console.log(event);
            $dialog.dialog({title:event.title});
            $('p',$dialog).empty().append(
              $('<p />').text(event.allDay ? 'All day event' : 'Scheduled: ' + event.start + '-' + event.end)
            );
            $dialog.dialog('open');
          }
        });
      });
    </script>
  </body>
</html>

Теперь нажмите на событие.Неполированная, да, но показывает довольно простой способ достижения того, что вы собираетесь.

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

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

...