Как использовать календарь jQuery на вкладке jQuery? - PullRequest
Новая
       165

Как использовать календарь jQuery на вкладке jQuery?

0 голосов
/ 05 июня 2011


Сегодня я пытаюсь заставить fullCalendar Адама Аршоу работать внутри моей страницы.Я прочитал документацию , представленную на его веб-странице, а также любой вопрос, который я нашел, он мог бы помочь здесь, в переполнении стека, но все, что я пробовал до сих пор, обречено до отказа!

В основном у меня есть три вкладки jQuery-ui.Я хочу, чтобы мой календарь отображался в третьем.Мне все равно, будет ли он предварительно загружен или будет загружаться, когда я нажму на ссылку для третьей вкладки.(Хорошо, я признаюсь, я абсолютно не знаю, какой из них имеет место :-P).Предположим, однако, что я хочу, чтобы он срабатывал при нажатии на третью вкладку.

Вот мой код: 

<head>
    ...        
    <link rel="stylesheet" href="common/css/fullcalendar.css" 
        type="text/css" media="screen, projection" />

    <!-- This is a custom theme downloaded from jQuery UI -->
    <link rel="stylesheet" href="common/css/jquery-ui-user_area.css" 
        type="text/css" media="screen, projection" />

    ....
    <!-- Is the following OK? -->
    <script type="text/javascript" 
        src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
    </script>
    <script type="text/javascript" 
        src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js">
    </script>

    <script type="text/javascript" src="common/js/fullcalendar.js"></script>
    <script type="text/javascript" src="common/js/gcal.js"></script>

    <!-- The fullCalendar initiallizing code follows: -->
    <script> 
        $(function() {
            $ ('a#plan_tab').live('click', function(){
                var date = new Date();
                var d = date.getDate();
                var m = date.getMonth();
                var y = date.getFullYear();

                $('#plan_calendar').fullCalendar({
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay'
                    },
                    editable: true,
                    theme: true
                });            
            });
        });
    </script>
</head>

Для последнего сценария, который я также пробовал: 

<script> 
    $(document).ready(function(){      
        var date = new Date();
        ...     
    });
</script>

до тех пор, пока другие ароматы и способы.

Итак, в основном, в теле html, мой календарь должен находиться здесь: 

<body>
    ...
    <section id="main_content">
        <div  class="user_area">
            <div id="area_tabs">
                <ul>
                    <li><a href="#overview">Overview</a></li>
                    <li><a href="#activity">Activity</a></li>
                    <li><a href="#plan" id="plan_tab">Travel Plan</a></li>
                </ul>
                <div id="overview">Some blahs</div>
                <div id="activity">Some other blahs</div>
                <div id="plan">
                    <!-- Here it should be me calendar! Arrrh -->
                    <div id="plan_calendar></div>
                </div>
            </div>
        </div>
     </section>
     ...
</body>

Но это не так!... Вы видите какие-нибудь подсказки, где это может скрываться?: -D

Кстати, я подумал, что было бы полезно, чтобы проект где-то жил (использовал общедоступную папку Dropbox ...), чтобы вы могли просмотреть страницу Я говорю о,Однако он не останется там навсегда.
В любом случае, я прошу прощения за длинные вопросы.
Заранее спасибо за вашу помощь!

1 Ответ

1 голос
/ 05 июня 2011

есть веская причина, по которой предыдущий код не работает, ваши селекторы неверны, рассмотрим этот, например: 

$ ('a#plan').live('click', function(){
                var date = new Date();
                var d = date.getDate();
                var m = date.getMonth();
                var y = date.getFullYear();

в вашем HTML нет такого Якоря с id = "plan", вам нужно добавить этот идентификатор, и ваш селектор начнет работать. Я изменил встроенный код и получил полный календарь для работы, но с некоторыми проблемами с пользовательским интерфейсом.

так у меня получается, что код привязки выглядит так: 

<a href="#plan" id="plan">Travel Plan</a>

и код только что работал.

просто дайте мне знать, если это решило вашу проблему независимо от того, что было в интерфейсе, спасибо.

Обновление: После того, как вы изменили код, решение также должно быть изменено, вот мои мысли и решение для вашей проблемы:

Код перехватывал событие, используя метод .live(), но, поскольку нам это не нужно, обработка события .click() напрямую сделала свое дело, и календарь теперь работает нормально

Вот полный код после этих модификаций. 

 $(function() {
    $ ('a#plan_tab').click(function(){
                var date = new Date();
                var d = date.getDate();
                var m = date.getMonth();
                var y = date.getFullYear();
                $('#plan_calendar').fullCalendar({
                header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
                },
                editable: true,
                theme: true
        });
    });
});

дайте мне знать, если это сработало для вас, и не забудьте пометить как ответ.

...