Question

我需要使用read more/read less实现jquery calendar功能。我在下面解释我的代码。

<button type="button" id="btn" onclick="getCalendar()">GET</button>
  <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; }
                },
        ///////////
        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>

如果title文字长度超过10，我需要在这些半文字之后应该有一个read more选项和.....。当用户点击该阅读更多选项时，将显示总标题，当用户再次点击read less选项时，它将显示正常文本。Here is my full plunkr code。

Answer 1

您可以使用qtip这样添加工具提示：

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/basic/jquery.qtip.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/basic/jquery.qtip.js"></script>
  <link href="calendar.css" rel="stylesheet">
  <script src="moment.js"></script>
  <script src="fullcalendar.js"></script>
  <link href="style.css" rel="stylesheet" />
  <script src="script.js"></script>
</head>

<body>
  <h1>Calendar</h1>
  <button type="button" id="btn" onclick="getCalendar()">GET</button>
  <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>
</body>

我希望这可以帮到你！

如何在标题中实现阅读更多功能使用fullcalender

1 个答案: