구현 방법 제목에 더 많은 기능을 추가 fullcalender 사용

jquery calendar을 사용하여 read more/read less 기능을 구현해야합니다. 아래 코드를 설명하고 있습니다. title 텍스트 길이가 10 개 이상이면구현 방법 제목에 더 많은 기능을 추가 fullcalender 사용

<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>

여기에 나는 그 반 텍스트로 한 read more 옵션 .....이 있어야합니다. 사용자가 해당 추가 옵션을 클릭하면 총 제목이 표시되고 사용자가 read less 옵션을 다시 클릭하면 일반 텍스트가 표시됩니다. Here is my full plunkr code.

출처

2017-12-14 subhra

당신은 qtip이 방법을 사용하여 도구 설명을 추가 할 수 있습니다

<!DOCTYPE html> 
<html> 

<head> 
    <script data-require="[email protected]*" 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>

을 나는 희망이 당신을 도와줍니다!

출처

2017-12-14 11:48:25 jcarrera

이것은 좋은 접근법이지만 실제로 렌더링 된 주요 이벤트에서 제목을 수정하지 않는다고 생각합니다. 'eventShortTitle'을 정의했지만 결코 사용하지 마십시오. 솔루션에서 한 줄 또는 두 줄의 코드를 놓치셨습니까? – ADyson

나는 대답을 업데이트했다 : – jcarrera

@jcarrera : 알았어, 그 작동하지만 툴팁은 mousehover 때 상수로 남아 있지 않다. [plunkr code] (https://plnkr.co/edit/Am78vJhXcVTCPUilwH0h?p=preview)를 확인하십시오. – subhra

답변

관련 문제