4

fullCalendarを使用し、qTipを使用してeventMouseoverを使用して説明を表示することを検討しています。

誰かがこれを行うことができたか、解決策を知っていますか？私はグーグルで この投稿を実装しようとしましたが、私は喜びがありませんでした。私がそれを動作させた唯一の時、それはループに入り、私のブラウザをクラッシュさせました。

アドバイス/サポートをいただければ幸いです。

フォンシュミット。

更新：これが私が始めているコードです（これはサンプルスクリプトですが、qTipを統合できれば進歩する可能性があります）。qTipなどを使用する準備ができています。今どこから始めたらいいのかわからない？再度、感謝します。

更新日：2010年7月15日。誰か助けてもらえますか？

<script type='text/javascript'>

     $(document).ready(function() {

      var date = new Date();
      var d = date.getDate();
      var m = date.getMonth();
      var y = date.getFullYear();

      $('#calendar').fullCalendar({
       theme: false,
       header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
       },
       editable: false,
       events: [
        {
         title: 'All Day Event',
         start: new Date(y, m, 1),
                        description: 'Blah blah blah blah blah blah blah'
        },
        {
         title: 'Long Event',
         start: new Date(y, m, d-5),
         end: new Date(y, m, d-2),
                        description: 'Blah blah blah blah blah blah blah'
        },
        {
         title: 'Meeting',
         start: new Date(y, m, d, 10, 30),
         allDay: false,
                        description: 'Blah blah blah blah blah blah blah'
        }
       ]
      });
     });

    </script>
4

3 に答える 3

8

jquery.qtip-1.0.jsをダウンロードしてみてください

RCは機能していないようですが、1.0は機能します（別のフォーラムで見つけました）。私はQTipをこのコードで動作させています：

    eventRender: function (event, element) {
        element.qtip({    
            content: {    
                title: { text: event.title },
                text: '<span class="title">Start: </span>' + ($.fullCalendar.formatDate(event.start, 'hh:mmtt')) + '<br><span class="title">Description: </span>' + event.description       
            },
            show: { solo: true },
            //hide: { when: 'inactive', delay: 3000 }, 
            style: { 
                width: 200,
                padding: 5,
                color: 'black',
                textAlign: 'left',
                border: {
                width: 1,
                radius: 3
             },
                tip: 'topLeft',

                classes: { 
                    tooltip: 'ui-widget', 
                    tip: 'ui-widget', 
                    title: 'ui-widget-header', 
                    content: 'ui-widget-content' 
                } 
            } 
        });
    }
于 2010-09-03T21:53:51.273 に答える
2

http://craigsworks.com/projects/forums/thread-google-calendar-like-bubble-for-jquery-fullcalendarをチェックすることをお勧めします。

私はこれで（ある種の）動作しています


      viewDisplay: function(view) { 
         var calendar = $(this);
     alert('Google calendars loaded');
         $('.fc-event').each(function(){
            // Grab event data
            var title = $(this).find('.fc-event-title').text(),
               data = calendar.data('fullCalendar').clientEvents(function(event){
                  return event.title === title;
               })[0];
            var qtipContent = data.description ? data.description : data.title;
            $(this).qtip({
               content: qtipContent,
               position: {
                  corner: {
                     target: 'topRight',
                     tooltip: 'bottomLeft'
                  }
               },
               show: 'mouseover',
               hide: 'mouseout',
               style: {
                 width: 200,
                 padding: 5,
                 background: '#A2D959',
                 color: 'black',
                 textAlign: 'center',
                 border: {
                    width: 7,
                    radius: 5,
                    color: '#A2D959'
                 },
                 tip: true
               }
            });
         });
         return false;
    },

私のqtipsはそのアラートなしでは起こらないという点で一種の働きです（理由はまだわかりません）。また、私のものはFirefoxとIE6でのみ動作します（これはなんて奇妙なことでしょう！）。

于 2010-07-15T19:50:25.693 に答える
0

私は特にqtipを使用していませんが、ここで述べたように、eventRenderコールバックを使用して行ったことに近いことを行いました。

コードは次のようになります。

$('#calendar').fullCalendar({
events: [
    {
        title: 'My Event',
        start: '2010-01-01',
        description: 'This is a cool event'
    }
    // more events here
],
eventRender: function(event, element) {
    element.qtip({
        content: event.description
    });
}

}）;

それが役に立ったかどうか教えてください。そうでなければ、今夜家に帰ったら、詳しく見ることができます。

于 2010-07-15T11:50:46.210 に答える