css 如何增加周视图的列宽取决于使用jQuery的fullcaledar中的事件计数

xqkwcwgp  于 2023-06-25  发布在  jQuery
关注(0)|答案(1)|浏览(286)

我已经建立了完整的日历，如 * 月，两周，议程日 * 视图。
我们如何根据事件计数增加相应的列宽，例如在同一时间的一天中，我有6个事件在那里，所以它们彼此重叠，如下所示。

那么我如何才能增加 * 星期二6/13* 天列宽度，调整所有事件，它应该是可读的.
我试过：

overlap: false,
         eventOverlap: false,
         slotEventOverlap: false,

但没有工作，由于这个问题，我不能看到所有的事件标题和时间也。
jQuery代码：

var data = [
    {
        title: 'All Day Event',
        start: '2023-06-01',
                allDay: false
    },
        {
            title:"7000048",
            start:"2023-06-01T21:15:00",
            end:"2023-06-03T02:15:00",
            allDay: false
        },
    {
        title: 'Long Event',
        start: '2023-06-07',
        end: '2023-06-07',
                allDay: false
    },
    {
        id: 999,
        title: 'Repeating Event',
        start: '2023-06-09T16:00:00',
                allDay: false
    },
    {
        id: 999,
        title: 'Repeating Event',
        start: '2023-06-16T16:00:00',
                allDay: false
    },
    {
        title: 'Conference',
        start: '2032-06-11',
        end: '2023-06-11',
                allDay: false
    },
    {
        title: 'Meeting',
        start: '2023-06-12T10:30:00',
        end: '2023-06-12T12:30:00',
                allDay: false
    },
    {
        title: 'Lunch',
        start: '2023-06-12T12:00:00',
                allDay: false
    },
    {
        title: 'Meeting',
        start: '2023-06-12T14:30:00',
                allDay: false
    },
    {
        title: 'Happy Hour',
        start: '2023-06-12T17:30:00',
                allDay: false
    },
    {
        title: 'Dinner',
        start: '2023-06-12T20:00:00',
                allDay: false
    },
    {
        title: 'Birthday Party',
                start: '2023-06-13T10:30:00',
        end: '2023-06-13T21:30:00',
                allDay: false,
                description: 'bdy party'
    },
        {
                title: 'title 1',
                start: '2023-06-13T10:30:00',
                end: '2023-06-13T21:30:00',
                allDay: false,
                overlap: false,
                textColor: 'Yellow',
                borderColor: 'green',
                description: 'checking one'
    },
        {
                title: 'title 1',
                start: '2023-06-13T10:30:00',
                end: '2023-06-13T21:30:00',
                allDay: false,
                overlap: false,
                textColor: 'Yellow',
                borderColor: 'green',
                description: 'checking one'
    },
        {
                title: 'title 1',
                start: '2023-06-13T10:30:00',
                end: '2023-06-13T21:30:00',
                allDay: false,
                overlap: false,
                textColor: 'Yellow',
                borderColor: 'green',
                description: 'checking one'
    },
        {
                title: 'title 1',
                start: '2023-06-13T10:30:00',
                end: '2023-06-13T21:30:00',
                allDay: false,
                overlap: false,
                textColor: 'Yellow',
                borderColor: 'green',
                description: 'checking one'
    },
        {
                title: 'title 1',
                start: '2023-06-13T10:30:00',
                end: '2023-06-13T21:30:00',
                allDay: false,
                overlap: false,
                textColor: 'Yellow',
                borderColor: 'green',
                description: 'checking one'
    },
         {
        title: 'checking timeings',
                start: '2023-06-13T10:30:00',
        end: '2023-06-13T20:30:00',
                allDay: false,
                overlap: false,
                backgroundColor : 'Yellow',
                textColor: 'red',
                borderColor: 'green',
                description: 'checking two'

    },
        {
        title: 'checking timeings 4',
                start: '2023-06-13T11:30:00',
        end: '2023-06-13T23:30:00',
                allDay: false,
                overlap: false,
                backgroundColor : 'orange',
                textColor: 'red',
                borderColor: 'green',
                description: 'checking two'

    },
    {
        title: 'Click for Google',
        url: 'https://google.com/',
        start: '2023-06-28',
                allDay: false
    }
];
$(document).ready(function() {
  var date = new Date();
  var d = date.getDate();
  var m = date.getMonth();
  var y = date.getFullYear();
  $('#calendar').fullCalendar({
    timeZone: 'ET',
    defaultView: 'twoWeek',
    aspectRatio: 1.5,
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month, twoWeek, agendaDay' //agendaDay
    },
    defaultDate: '2023-06-16',
    editable: false,
    eventResourceEditable: true,
    dayMaxEvents: true,
    eventLimit: true, // allow "more" link when too many events
    allDaySlot: false,
    slotMinutes: 120,
    slotDuration: '02:00',
    overlap: false,
    eventOverlap: false,
    slotEventOverlap: false,
    timeFormat: '',
    contentHeight: 'auto',
    agenda: 'h:mm{ - h:mm}',
    axisFormat: 'h:mm{ - h:mm}',
    day: 'h:mm{ - h:mm}',
    axisFormat: 'h(:mm)tt',
    columnFormat: "dddd \n M/D",
    events: data,
    eventMouseover: function(calEvent, jsEvent) {
      var popup = '<div class="tooltipevent" \n\
                            style="--r: 50px;--h: 150px;--p: 10%;padding: var(--r);border-right: var(--h) solid #0000;--m:conic-gradient(from 30deg at var(--p) 100%,#0000,#000 1deg 30deg,#0000 31deg)0 100%/100% calc(100% - var(--r)) no-repeat,conic-gradient(at calc(var(--r)/2) calc(var(--r)/2),#000 270deg,#0000 0)0 0/calc(100% - var(--r)/2) calc(100% - var(--r)/2) padding-box,radial-gradient(50% 50%,#000 98%,#0000)0 0/var(--r) var(--r) space padding-box;-webkit-mask: var(--m);mask: var(--m);width:200px;height:100px;background:#F0F0F0;color: green;position:absolute;padding:15px;font-size:15px;z-index:10001;border:1px groove red !important;font-family: Verdana,Arial,sans-serif;font-size:12px" >Titile: ' +
        calEvent.title + '<br>Description: ' +
        calEvent.description + '<br>Start: ' +
        calEvent.start + '<br>End: ' +
        calEvent.end + '<br></div>';
      var tooltip = popup;
      var $tooltip = $(tooltip).appendTo('body');

      $(this).mouseover(function(e) {
        $(this).css('z-index', 10000);
        $tooltip.fadeIn('500');
        $tooltip.fadeTo('10', 1.9);
      }).mousemove(function(e) {
        $tooltip.css('top', e.pageY + 10);
        $tooltip.css('left', e.pageX + 20);
      });
    },
    eventMouseout: function(calEvent, jsEvent) {
      $(this).css('z-index', 8);
      $('.tooltipevent').remove();
    },
    views: {
      twoWeek: {
        type: 'agenda',
        duration: {
          weeks: 2
        },
        buttonText: '2 weeks',
        rows: 2
      }
    },
    eventAfterRender: function(event, element, view) { //tried but not working
      $(element).css('width', '100px');
    },
    eventRender: function(event, element, view) { //tried but not working
      var nextEventLeft = element.offset().left + element.width() + 5;
      element.parent().children().eq(element.index() + 1).css('left', nextEventLeft);
    },
    selectable: true,
    selectHelper: true,
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src = "https://cdn.jsdelivr.net/npm/moment@2/min/moment.min.js"></script>
        <script src = "https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js" ></script>
        <script src = "https://cdn.jsdelivr.net/npm/fullcalendar@3.10.5/dist/fullcalendar.min.js" ></script>
        <link rel="stylesheet" href = "https://cdn.jsdelivr.net/npm/fullcalendar@3.10.5/dist/fullcalendar.min.css" >
        <link rel = "stylesheet" href = "https://code.jquery.com/ui/1.12.1/themes/cupertino/jquery-ui.css">
<style>
.fc-view-container {
  overflow-x: scroll;
}
/* **For 2 day view** */
.fc-view.fc-twoWeek-view.fc-agenda-view{
  width: 200%;
}
</style>
Needs more:
<div id='calendar-container'>
      <div id='calendar' style = "font-family: Segoe UI-MONOSPACE;"></div>  <!-- font-family: Verdana,Arial,sans-serif;-->
    </div>

任何帮助请。
谢谢你。

css

1条答案

按热度按时间
pgky5nke

pgky5nke1#

注意：这并不能直接解决日历空间问题-我确实对弹出提示做了一些修改以使用对话框-你已经有jQuery UI来利用它-保留默认标题和类似的东西，可能需要调整，但确实连接了鼠标进出显示它，当你移动-这可能有助于空间挑战，虽然间接。
我做了一些超快的尝试类似于你所做的，但没有很快找到一个变通办法。如果我有时间，我可能会回来，但没有作出承诺。
我总结了页面中的变化，因为我编辑它与显示/隐藏列表。

$(function() {
  const calSelector = '#calendar';
  const popTemplate = document.getElementById("popup-template");
  const popTClone = popTemplate.content.firstElementChild
    .cloneNode(true);
  const $popup = $(popTClone).appendTo(document.body);;

  $('.changes-view').on('click', function(event) {
    let clist = $('.change-list')[0];
    clist.dataset.showhide =
      (clist.dataset.showhide === "show") ? "hide" : "show";
  });
  $(document.body)
    .on("showtip", function(event, calEvent, jsEvent) {
      const calItem = $(jsEvent.currentTarget);
      $popup.find('.pop-title').text(calEvent.title)
        .end().find('.pop-desc').text(calEvent.description)
        .end().find('.pop-start').text(calEvent.start)
        .end().find('.pop-end').text(calEvent.end);
      const options = {
        'title': calEvent.title,
        appendTo: 'body',
        show: {
          effect: "blind",
          duration: 200
        },
        position: {
          my: "left bottom",
          at: "right top",
          of: calItem
        },
        width: 400,
        autoOpen: true
      };
      $popup.dialog(options);
    })
    .on("hidetip", function() {
      $popup.dialog("close");
    })
    .on('mouseleave', ".tooltipevent-container", function() {
      $(this).remove();
    });
  let date = new Date();
  let d = date.getDate();
  let m = date.getMonth();
  let y = date.getFullYear();
  $(calSelector).fullCalendar({
    timeZone: 'ET',
    defaultView: 'twoWeek',
    aspectRatio: 1.5,
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month, twoWeek, agendaDay' //agendaDay
    },
    defaultDate: '2023-06-16',
    editable: false,
    eventResourceEditable: true,
    dayMaxEvents: true,
    eventLimit: true, // allow "more" link when too many events
    allDaySlot: false,
    slotMinutes: 120,
    slotDuration: '02:00',
    overlap: false,
    eventOverlap: false,
    slotEventOverlap: false,
    timeFormat: '',
    contentHeight: 'auto',
    agenda: 'h:mm{ - h:mm}',
    axisFormat: 'h:mm{ - h:mm}',
    day: 'h:mm{ - h:mm}',
    axisFormat: 'h(:mm)tt',
    columnFormat: "dddd \n M/D",
    events: data,
    eventMouseover: function(calEvent, jsEvent) {
      $(document.body).trigger('showtip', [calEvent, jsEvent]);
    },
    eventMouseout: function(calEvent, jsEvent) {
      $(document.body).trigger('hidetip');
    },
    views: {
      twoWeek: {
        type: 'agenda',
        duration: {
          weeks: 2
        },
        buttonText: '2 weeks',
        rows: 2
      }
    },
    eventAfterRender: function(event, element, view) { //tried but not working
      //    $('.fc-agendaDay-button').on('click', function() {
      //     $(calSelector).css('min-width', $('.fc-resource-cell').length * 125);
      //    });
    },
    eventRender: function(event, element, view) { //tried but not working
      // var nextEventLeft = element.offset().left + element.width() + 5;
      // element.parent().children().eq(element.index() + 1).css('left', nextEventLeft);
      //  $(calSelector).css('min-width', $('.fc-resource-cell').length * 125);
    },
    selectable: true,
    selectHelper: true
  });
});

const data = [{
    title: 'All Day Event',
    start: '2023-06-01',
    allDay: false
  },
  {
    title: "7000048",
    start: "2023-06-01T21:15:00",
    end: "2023-06-03T02:15:00",
    allDay: false
  },
  {
    title: 'Long Event',
    start: '2023-06-07',
    end: '2023-06-07',
    allDay: false
  },
  {
    id: 999,
    title: 'Repeating Event',
    start: '2023-06-09T16:00:00',
    allDay: false
  },
  {
    id: 999,
    title: 'Repeating Event',
    start: '2023-06-16T16:00:00',
    allDay: false
  },
  {
    title: 'Conference',
    start: '2032-06-11',
    end: '2023-06-11',
    allDay: false
  },
  {
    title: 'Meeting',
    start: '2023-06-12T10:30:00',
    end: '2023-06-12T12:30:00',
    allDay: false
  },
  {
    title: 'Lunch',
    start: '2023-06-12T12:00:00',
    allDay: false
  },
  {
    title: 'Meeting',
    start: '2023-06-12T14:30:00',
    allDay: false
  },
  {
    title: 'Happy Hour',
    start: '2023-06-12T17:30:00',
    allDay: false
  },
  {
    title: 'Dinner',
    start: '2023-06-12T20:00:00',
    allDay: false
  },
  {
    title: 'Birthday Party',
    start: '2023-06-13T10:30:00',
    end: '2023-06-13T21:30:00',
    allDay: false,
    description: 'bdy party'
  },
  {
    title: 'title 1',
    start: '2023-06-13T10:30:00',
    end: '2023-06-13T21:30:00',
    allDay: false,
    overlap: false,
    textColor: 'Yellow',
    borderColor: 'green',
    description: 'checking one'
  },
  {
    title: 'title 1',
    start: '2023-06-13T10:30:00',
    end: '2023-06-13T21:30:00',
    allDay: false,
    overlap: false,
    textColor: 'Yellow',
    borderColor: 'green',
    description: 'checking one'
  },
  {
    title: 'title 1',
    start: '2023-06-13T10:30:00',
    end: '2023-06-13T21:30:00',
    allDay: false,
    overlap: false,
    textColor: 'Yellow',
    borderColor: 'green',
    description: 'checking one'
  },
  {
    title: 'title 1',
    start: '2023-06-13T10:30:00',
    end: '2023-06-13T21:30:00',
    allDay: false,
    overlap: false,
    textColor: 'Yellow',
    borderColor: 'green',
    description: 'checking one'
  },
  {
    title: 'title 1',
    start: '2023-06-13T10:30:00',
    end: '2023-06-13T21:30:00',
    allDay: false,
    overlap: false,
    textColor: 'Yellow',
    borderColor: 'green',
    description: 'checking one'
  },
  {
    title: 'checking timeings',
    start: '2023-06-13T10:30:00',
    end: '2023-06-13T20:30:00',
    allDay: false,
    overlap: false,
    backgroundColor: 'Yellow',
    textColor: 'red',
    borderColor: 'green',
    description: 'checking two'

  },
  {
    title: 'checking timeings 4',
    start: '2023-06-13T11:30:00',
    end: '2023-06-13T23:30:00',
    allDay: false,
    overlap: false,
    backgroundColor: 'orange',
    textColor: 'red',
    borderColor: 'green',
    description: 'checking two'

  },
  {
    title: 'Click for Google',
    url: 'https://google.com/',
    start: '2023-06-28',
    allDay: false
  }
];
.fc-view-container {
  overflow-x: scroll;
}

/* **For 2 day view** */

/*
.fc-view.fc-twoWeek-view.fc-agenda-view {
  width: 200%;
}
*/

.calendar-container {
  font-family: Segoe UI-MONOSPACE, serif;
}

.changes-made {
  display: grid;
  border: solid 1px #00FFB0;
}

.change-list {
  display: none;
}

.change-list pre {
  margin: 0.125em;
}

.change-list[data-showhide="show"] {
  display: block;
}

.changes-made .change-list>* {
  border: solid 1px #B0B0FF;
  padding: 0.25em;
}

.tooltipevent {
  /* commenedt out most of this as I used the Dialog
  --r: 3.125em;
  --h: 9.375em;
  --p: 10%;
  padding: var(--r);
  border-right: var(--h) solid #0000;
  --m: conic-gradient(from 30deg at var(--p) 100%, #0000, #000 1deg 30deg, #0000 31deg)0 100%/100% calc(100% - var(--r)) no-repeat, conic-gradient(at calc(var(--r)/2) calc(var(--r)/2), #000 270deg, #0000 0)0 0/calc(100% - var(--r)/2) calc(100% - var(--r)/2) padding-box, radial-gradient(50% 50%, #000 98%, #0000)0 0/var(--r) var(--r) space padding-box;
  -webkit-mask: var(--m);
  mask: var(--m);
  width: 12.5em;
  height: 6.125em;
  background-color: #F0F0F0;
  color: green;
  position: absolute;
  padding: 1em;
  z-index: 10001;
  border: 1px groove red !important;
  */
  font-family: Verdana, Arial, sans-serif;
  font-size: 0.75em;
}

.tooltipevent-container {
  display: none;
}

.pop-text {
  font-weight: 600;
  padding-right: 1em;
}

.pop-text::after {
  content: ':';
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-ui@1.13.2/themes/base/autocomplete.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@3.10.5/dist/fullcalendar.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/cupertino/jquery-ui.css">
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-ui@1.13.2/dist/jquery-ui.min.js" integrity="sha256-lSjKY0/srUM9BE3dPm+c4fBo1dky2v27Gdjm2uoZaL0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@3.10.5/dist/fullcalendar.min.js"></script>
<div class="changes-made">
  <button type="button" class="changes-view">Click to toggle changes made view</button>
  <ol class="change-list">
    <li>Updated jQuery to more recent</li>
    <li>Change jQuery instantiation to use recommened form:
      <pre>$(document).ready(function() {</pre>changed to
      <pre>  $(function() {</pre>
    </li>
    <li>Changed lots of
      <pre>var</pre>changed to
      <pre>const and let</pre>
    </li>
    <li>Use template element not hard(er) to manage template literal code for popup <a ref="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template">Template</a></li>
    <li>Moved CSS from code to CSS where it should be for template</li>
    <li>Spelling Titile: to Title:</li>
    <li>Hooked events to document body right at the start so we can use dynamicly inserted content like the popup</li>
    <li>Used an event to show/hide the tip pop up</li>
    <li>Changed the logic to position the top above and to right of each</li>
    <li>Changed tip popup to use dialog ref: <a href="https://api.jqueryui.com/dialog/">UI Dialog</a></li>
  </ol>
</div>

<div id='calendar-container' class="calendar-container">
  <div id='calendar'></div>
</div>

<template id="popup-template">
<div class="tooltipevent-container" title="">
<div class="tooltipevent">
<div><span class="pop-text">Title</span><span class="pop-title pop-val"></span></div>
<div><span class="pop-text">Description</span><span class="pop-desc pop-val"></span></div>
<div><span class="pop-text">Start</span><span class="pop-start pop-val"></span></div>
<div><span class="pop-text">End</span><span class="pop-end pop-val"></span></div>
</div></div>
</template>
赞(0）分享  回复(0）举报  2023-06-25
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com