javascript - 如何在全日历中调整文本框的大小以容纳更多文本

问题描述

这是生成完整日历的代码，它基于完整日历示例中包含的模板，并进行了一些修改。

import { Calendar } from '@fullcalendar/core';
import googleCalendarPlugin from '@fullcalendar/google-calendar';
import interactionPlugin from '@fullcalendar/interaction';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';



import Bootstrap from 'bootstrap/dist/css/bootstrap.min.css'; // eslint-disable-line no-unused-vars
require('bootstrap/dist/js/bootstrap.min.js');

import bootbox from 'bootbox';


require('./styles/core/main.min.css');
require('./styles/daygrid/main.min.css');
require('./styles/list/main.min.css');
require('./styles/timegrid/main.min.css');

var calendarEl = document.getElementById('calendar');
if (calendarEl){
document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new Calendar(calendarEl, {
    eventClick: function(info) {
      if (info.event.extendedProps.description){
      bootbox.alert('Event: ' +  info.event.title + '<br>'  + 'Description: ' + info.event.extendedProps.description);
      }
      else {
        bootbox.alert('Event: ' +  info.event.title + '<br>' + 'Description: ' + 'none');
      }
      info.jsEvent.preventDefault(); // don't let the browser navigate

    },

    plugins: [ interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin, googleCalendarPlugin ],
    contentHeight: 'auto',
    googleCalendarApiKey: 'redacted',
    header: {
      left: 'prev,next',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,listWeek'
    },
    //defaultDate: '2018-01-12',
    navLinks: true, // can click day/week names to navigate views
    editable: true,
    eventLimit: true, // allow "more" link when too many events
    events: {
        googleCalendarId: 'l1rnqsakc8kb0lbmo2ll3ag5v0@group.calendar.google.com'
  }

  });
   calendar.render();

});
}

这是calendar.html：

<!DOCTYPE html>
<html>
<head>

<meta charset='utf-8' />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
  body {
    margin: 40px 10px;
    padding: 0;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 16px;
  }
  #calendar {
    max-width: 600px;
    margin: 0 auto;
  }
  .fc-day-grid-event > .fc-content {
    white-space: normal;
}
</style>
</head>
<body>

  <br>
  <div class="container">
    <div id='calendar'></div>
  </div>
</body>
</html>

我已经想出如何通过修改 css 以删除 no-wrap 属性来允许日历中每个正方形多行，但我不知道如何确保正方形自动扩展以适应这个新文本添加。如果有人熟悉 fullcalendar，任何帮助将不胜感激。

我在这里找到了我想要完成的示例：https ://embed.plnkr.co/plunk/2JFg5y但我不确定我的代码与该示例有何不同

标签： javascripthtmlcssfullcalendarfullcalendar-4

javascript - 如何在全日历中调整文本框的大小以容纳更多文本

问题描述

解决方案

推荐阅读