Как изменить размер текстовых полей в полной календаре, чтобы вместить больше текста - PullRequest
Новая
       5

Как изменить размер текстовых полей в полной календаре, чтобы вместить больше текста

0 голосов
/ 31 октября 2019

This is the screenshot of my resulting calendar. You can view it at etabeta.sudz.dev

Вот код, который генерирует fullcalendar, он основан на шаблоне, включенном в примеры fullcalendar с некоторыми изменениями. 

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, чтобы убрать не-атрибут обтекания, но я не знаю, как сделать так, чтобы квадраты автоматически расширялись, чтобы вместить этот новый текст, который был добавленЕсли кто-то знаком с fullcalendar, любая помощь будет принята с благодарностью.

Я нашел пример того, что я пытаюсь выполнить здесь: https://embed.plnkr.co/plunk/2JFg5y, но я не уверен, насколько мой код отличается от этого примера

...