如何使用Fullcalendar

时间:2017-12-15 05:46:11

标签: jquery fullcalendar

我需要重定向到月视图,同时使用Fullcalendar点击年份视图的月份单元格。我在下面解释我的代码。

<div class="calender" id='calendar'></div>
  <script>
    function getCalendar() {
      var todayDate = new Date().toISOString().slice(0, 10);
      // var evStartDate = new Date(inputdate)
      //console.log('date',evStartDate);
      //addClassByDate(evStartDate);
      $('#calendar').fullCalendar({
        theme: true,
        header: {
          left: 'prev,next',
          center: 'title',
          right: 'year,month,agendaWeek,agendaDay'
        },
        ///////// edit
        dayClick: function(date, jsEvent, view) {
          //alert('day click');
        },
        eventClick: function(event, jsEvent) {
          //alert('event clicked');
          $('#eventpopup').modal({
            backdrop: 'static'
          });
        },
        eventRender: function(event, element, view) {
          var evStart = moment(view.intervalStart).subtract(1, 'days');
          var evEnd = moment(view.intervalEnd).subtract(1, 'days');
          if (!event.start.isAfter(evStart) ||
            event.start.isAfter(evEnd)) {
            return false;
          }
          if (event.title.length > 10) {
            var eventShortTitle = event.title.substring(0, 10) + '...';
            element.qtip({
              content: event.title,
              position: {
                at: 'bottom left', // at the bottom right of...
              }
            });
            element.find('.fc-title').text(eventShortTitle);
          }
        },
        ///////////
        defaultDate: todayDate,
        navLinks: true, // can click day/week names to navigate views
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        events: [{
          title: 'jQuery is a fast and concise JavaScript Library',
          start: '2017-12-01'
        }, {
          title: 'hello',
          start: '2017-12-02'
        }, {
          id: 999,
          title: 'hii',
          start: '2017-11-02'
        }]
      });
    }
  </script>

这里我也有年视图,因为我的要求是年视图,我使用旧版Fullcalendar。在这里,我需要用户点击月份单元格,相应的月份将从月视图中显示。Here is my full plunkr code.

2 个答案:

答案 0 :(得分:0)

你可以尝试这个

public class FINAL extends Applet implements Runnable
{
    Thread t;
    double a = 9.81;              // Play with the acceleration
    double h = 290.0;
    string currDirection = "down";  // Add current direction
    double timeMoving = 0.0;      // Time in each direction
    double speed = 0.0;           // Add speed
    double maxHeight = 290.0;          // Add first maxHeight

    // ...

    public void paint(Graphics g)
    {
        Graphics2D g2 = (Graphics2D)g;
        g.setColor(Color.BLUE);
        g.fillOval(100, h, 20, 20);

        //System.out.println("p = " +p);

        // time is 100ms = 0.1s
        timeMoving += 0.1;

        if (currDirection == "down")
        {
            h = 1/2*a*Math.pow(timeMoving,2);

            if((maxHeight-h) <= 0)
            {
                currDirection = "up";
                speed += -1 * a*(timeMoving);
                timeMoving = 0;
            }
        }
        else if (currDirection == "up")
        {
           h = speed*timeMoving + 1/2*a*Math.pow(timeMoving,2);
           double currentSpeed = speed + a*timeMoving; 

           if (currentSpeed >= 0)
           {
               maxHeight = h;
               currDirection = "down";
               speed = 0;
               timeMoving = 0;
           }
        }
    }
}

答案 1 :(得分:0)

实际上,您可以在changeView方法上设置日期。

  

立即切换到其他视图。

     

.fullCalendar(&#39; changeView&#39;,viewName,dateOrRange)

例如:

$('#calendar').fullCalendar('changeView', 'agendaDay', '2017-06-01');