Question

在尝试自定义FullCalendar jQuery插件的外观时，我遇到了一个无法自行修复的问题。更确切地说，我一直试图围绕标题的角落，遗憾的是，它并不像应用边界半径那么简单。

这就是我设法让它看起来的样子： http://185.81.157.248/learnardo/index2.php

正如您所看到的那样，广场仍然存在，并且编辑会影响整个日历。

有没有人知道我的做法有什么问题？

Answer 1

将border-collapse: separate;添加到表中并设置正确的背景（例如：background-color: black;到tr和background-color: white;到td。它应该做你想要的。

<div class="fc-view fc-agendaWeek-view fc-agenda-view">
  <table style="border-collapse: separate;">
    <thead class="fc-head">
      <tr style="background-color: black;">
        <td class="fc-widget-header" style="background-color: white;">

您需要调整以前的边界半径规则（如果您不希望它们如此圆整）。

根据您的网页内容，这是一个混乱的片段：

＆＃13;

$(document).ready(function() {

            // gère la hauteur de la sidebar
            function adaptSideBar(){
                var hauteurEcran = $(window).height();
                var hauteurDiv = hauteurEcran - 110;
                $(".sidebarHeight").height(hauteurDiv);
            }
            
           
            // if the user resizes the window
            $( window ).resize(function() {
                // resize the sidebar
                adaptSideBar();
                // resize the calendar
                var hauteurEcran = $(window).height();
                var hauteurCalendar = hauteurEcran - 75;
                $('#calendar').fullCalendar('option', 'height', hauteurCalendar);
                //replace la timeline du calendrier
                setTimeline();
            });

                adaptSideBar();

                var hauteurEcran = $(window).height();
                var hauteurCalendar = hauteurEcran - 75;

                $('#calendar').fullCalendar({
                    header:{
                        left: 'agendaDay,agendaWeek,month',
                        center: 'prev,title,next',
                        right: ''
                    },
                    columnFormat: { month: 'ddd', week: 'dddd', day: 'dddd d/M' },
                    defaultView: 'agendaWeek',
                    firstDay: 1,
                    height: hauteurCalendar,
                    allDaySlot: false,
                    slotDuration: '01:00:00',
                    viewRender: function(view) {             
                        if(typeof(timelineInterval) != 'undefined'){
                          window.clearInterval(timelineInterval);
                        }
                        timelineInterval = window.setInterval(setTimeline, 60000);
                        try {
                          setTimeline();
                          drawLines();
                          scrollMe();

                        } catch(err) {}
                    },
                    scrollTime: $("#timenow").val(),
                    editable : true,
                    events: [
                        {
                            title  : 'event2',
                            start  : '2015-06-26T12:30:00',
                            end    : '2015-06-26T15:30:00',
                            color  : "red"
                        },
                        {
                            title  : 'event3',
                            start  : '2015-06-27T12:22:00',
                            end    : '2015-06-27T18:34:00'
                        }
                    ]
                }); // fin du calendar

                //gestion de la scrollbar du calendar
                function scrollMe(){
                    
                    $(".fc-time-grid-container").niceScroll({
                        cursorcolor: "#919191",
                        scrollspeed: 200,
                        horizrailenabled: false,
                        hidecursordelay: 2000
                    });
                }

                // gestion des autres scrollbars
                $(".scrollme").niceScroll({
                    cursorcolor: "#919191",
                    scrollspeed: 200,
                    horizrailenabled: false,
                    hidecursordelay: 2000
                });

                function drawLines(){
                    $(".fc-agendaWeek-view .fc-body .fc-widget-content .fc-time-grid-container .fc-time-grid .fc-slats table tbody tr td:nth-child(2)").append("&lt;div class='linecalendar25'&gt;&lt;/div&gt;");
                    $(".fc-agendaWeek-view .fc-body .fc-widget-content .fc-time-grid-container .fc-time-grid .fc-slats table tbody tr td:nth-child(2)").append("&lt;div class='linecalendar50'&gt;&lt;/div&gt;");
                    $(".fc-agendaWeek-view .fc-body .fc-widget-content .fc-time-grid-container .fc-time-grid .fc-slats table tbody tr td:nth-child(2)").append("&lt;div class='linecalendar75'&gt;&lt;/div&gt;");
                }

                function setTimeline(view) {
                var slotsDiv  = $('.fc-slats:visible');
                var parentDiv = $('.fc-slats:visible').parent();
                var timeline = parentDiv.children(".timeline");
                if (timeline.length == 0) { //if timeline isn't there, add it
                    timeline = $("&lt;hr&gt;").addClass("timeline");
                    parentDiv.prepend(timeline);
                }

              var curTime = new Date();

              var curCalView = $("#calendar").fullCalendar('getView');
              if (curCalView.intervalStart &lt; curTime &amp;&amp; curCalView.intervalEnd &gt; curTime) {
                timeline.show();
              } else {
                timeline.hide();
                return;
              }
              var calMinTimeInMinutes = strTimeToMinutes(curCalView.opt("minTime"));
              var calMaxTimeInMinutes = strTimeToMinutes(curCalView.opt("maxTime"));
              var curSeconds = (( ((curTime.getHours() * 60) + curTime.getMinutes()) - calMinTimeInMinutes) * 60) + curTime.getSeconds();
              var percentOfDay = curSeconds / ((calMaxTimeInMinutes - calMinTimeInMinutes) * 60);

              var topLoc = Math.floor(slotsDiv.height() * percentOfDay);
              var timeCol = $('.fc-time:visible');
              timeline.css({top: topLoc + "px", left: (timeCol.outerWidth(true))+"px"});

              if (curCalView.name == "agendaWeek") { //week view, don't want the timeline to go the whole way across
                var dayCol = $(".fc-today:visible");
                var left = dayCol.position().left + 1;
                var width = dayCol.width() + 1;
                timeline.css({left: left + "px", width: width + "px"});
              }
            }

            function strTimeToMinutes(str_time) {
              var arr_time = str_time.split(":");
              var hour = parseInt(arr_time[0]);
              var minutes = parseInt(arr_time[1]);
              return((hour * 60) + minutes);
            }

        });

＆＃13;

html {
    background-color: #000000;
}
body {
    background-color: transparent;
    font-family: "Roboto",sans-serif;
    overflow-x: hidden;
}
.no-gutter > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}
.center {
    text-align: center;
}
.titreSubNavBar {
    font-size: 14px;
}
.pointer {
    cursor: pointer;
}
#logo {
    left: 15px;
    position: relative;
    top: 2px;
}
#customIcon1 {
    font-size: 2.1em;
    position: relative;
    top: 4px;
}
#customIcon2 {
    font-size: 20px;
    margin-left: 5%;
}
#customIcon3 {
    font-size: 2em;
    left: 50%;
    position: absolute;
    top: 0;
}
#customIcon4 {
    left: 77%;
    position: absolute;
    top: 0;
}
#customIcon5 {
    font-size: 2em;
}
#customIcon6 {
    font-size: 1.2em;
    position: absolute;
    right: 21%;
    top: 20%;
}
#customIcon7 {
    font-size: 2em;
}
#customIcon8 {
    margin-left: 4%;
}
#customIcon9 {
    position: relative;
    right: 4px;
}
#customIcon10 {
    font-size: 0.9em;
    padding: 3px 7px 5px 5px !important;
    position: relative;
    top: 1px;
}
#customIcon11 {
    font-size: 0.9em;
    padding: 3px 7px 5px 5px !important;
    position: relative;
    right: 5px;
    top: 1px;
}
#customIcon12 {
    position: relative;
    right: 19px;
}
#newProjectButton {
    width: 110px;
}
.taskbloc {
    background-color: white;
    border-bottom: 2px solid #e8e8e8;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    margin-left: 0;
}
.taskTitle {
    font-size: 12px;
    font-weight: 500;
}
.taskMinutes {
    font-size: 11px;
    font-weight: 300;
}
.heightTaskbar {
    height: 60px;
}
.containerRightSidebar {
    height: 60px;
    line-height: 60px;
}
.blocInfoRightSidebar {
    display: inline-block;
    line-height: normal;
    vertical-align: middle;
}
.pointsRightSidebar {
    bottom: 10px;
    font-size: 3em;
    position: relative;
}
.round {
    background-image: linear-gradient(-180deg, #e53935 50%, #ff9800 100%);
    border: 3px solid #e8e8e8;
    border-radius: 50%;
    display: inline-block;
    height: 25px;
    margin-bottom: 18px;
    width: 25px;
}
.bar {
    background: #e8e8e8 none repeat scroll 0 0;
    display: inline-block;
    height: 100%;
    margin-left: 2px;
    margin-right: -19px;
    width: 4px;
}
.rowGoal {
    bottom: 8px;
    position: relative;
}
.containerGoalProgressbar {
    margin-top: 2px;
}
.imageProfile {
    border-radius: 50%;
    width: 29px;
}
.profileName {
    margin-left: 4px;
}
#boutonAjoutProjet {
    background-color: white;
    border-radius: 50%;
    bottom: 20px;
    left: 10px;
    padding: 17px 25px;
    position: fixed;
}
button {
    outline: medium none;
}
thead tr:first-child td:first-child {
    border-top-left-radius: 15px;
}
thead tr:first-child td:last-child {
    border-top-right-radius: 15px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>

        <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:500,300,700,400">
        <link rel="stylesheet" href="dist/css/bootstrap3.3.4.css">
        <link href="dist/calendar/fullcalendar.css" rel="stylesheet">
        <link href="dist/calendar/myfullcalendar.css" rel="stylesheet">

        <!-- Site Begins -->
        <div class="container-fluid">
        <!-- first navbar -->
        
            <div class="row" id="navbar">
                <div class="myCol-md-2-5 col-sm-3 col-xs-3">
                    
                </div>
                
                <div class="col-md-7 col-sm-6 col-xs-6 text-center">
                    
                </div>
                
                <div class="myCol-md-2-5 col-sm-3 col-xs-3 profileBloc">
                    
                   
                </div>
            </div> 
            
            <!-- first navbar ends -->
            
            <!-- start subnavbar -->
            <div class="row">
                
                <!-- left side bar -->
                
                <div class="myCol-md-2-5">

                    
                </div>
                
                <!-- left side bar ends-->
                
                <!-- middle -->
                
                <div class="col-md-7">
                    <div class="row">

                        <div id="calendar" class="fc fc-ltr fc-unthemed"><div class="fc-toolbar"><div class="fc-left"><div class="fc-button-group"><button class="fc-agendaDay-button fc-button fc-state-default fc-corner-left" type="button">day</button><button class="fc-agendaWeek-button fc-button fc-state-default fc-state-active" type="button">week</button><button class="fc-month-button fc-button fc-state-default fc-corner-right" type="button">month</button></div></div><div class="fc-right"></div><div class="fc-center"><div><button class="fc-prev-button fc-button fc-state-default" type="button"><span class="fc-icon fc-icon-left-single-arrow"></span></button><h2>Aug 31 &mdash; Sep 6, 2015</h2><button class="fc-next-button fc-button fc-state-default" type="button"><span class="fc-icon fc-icon-right-single-arrow"></span></button></div></div><div class="fc-clear"></div></div><div class="fc-view-container" style=""><div class="fc-view fc-agendaWeek-view fc-agenda-view" style=""><table style="border-collapse: separate;"><thead class="fc-head" style=""><tr style="background-color: black;"><td class="fc-widget-header" style="background-color: white;"><div class="fc-row fc-widget-header"><table style=""><thead style=""><tr style=""><th class="fc-axis fc-widget-header" style="width: 37px; border-radius: 4px;"></th><th class="fc-day-header fc-widget-header fc-mon">Monday</th><th class="fc-day-header fc-widget-header fc-tue">Tuesday</th><th class="fc-day-header fc-widget-header fc-wed">Wednesday</th><th class="fc-day-header fc-widget-header fc-thu">Thursday</th><th class="fc-day-header fc-widget-header fc-fri">Friday</th><th class="fc-day-header fc-widget-header fc-sat">Saturday</th><th class="fc-day-header fc-widget-header fc-sun">Sunday</th></tr></thead></table></div></td></tr></thead><tbody class="fc-body"><tr><td class="fc-widget-content"><div class="fc-time-grid-container fc-scroller" style="height: 373px;" tabindex="5000"><div class="fc-time-grid"><hr class="timeline" style="top: 860px; left: 335px; width: 96px;"><div class="fc-bg"><table><tbody><tr><td class="fc-axis fc-widget-content" style="width: 37px;"></td><td data-date="2015-08-31" class="fc-day fc-widget-content fc-mon fc-past"></td><td data-date="2015-09-01" class="fc-day fc-widget-content fc-tue fc-past"></td><td data-date="2015-09-02" class="fc-day fc-widget-content fc-wed fc-past"></td><td data-date="2015-09-03" class="fc-day fc-widget-content fc-thu fc-today fc-state-highlight"></td><td data-date="2015-09-04" class="fc-day fc-widget-content fc-fri fc-future"></td><td data-date="2015-09-05" class="fc-day fc-widget-content fc-sat fc-future"></td><td data-date="2015-09-06" class="fc-day fc-widget-content fc-sun fc-future"></td></tr></tbody></table></div><div class="fc-slats"><table><tbody><tr><td class="fc-axis fc-time fc-widget-content" style="width: 37px;"><span>12am</span></td><td class="fc-widget-content"><div class="linecalendar25"></div><div class="linecalendar50"></div><div class="linecalendar75"></div></td></tr><tr><td class="fc-axis fc-time fc-widget-content" style="width: 37px;"><span>1am</span></td><td class="fc-widget-content"><div class="linecalendar25"></div><div class="linecalendar50"></div><div class="linecalendar75"></div></td></tr><tr><td class="fc-axis fc-time fc-widget-content" style="width: 37px;"><span>2am</span></td><td class="fc-widget-content"><div class="linecalendar25"></div><div class="linecalendar50"></div><div class="linecalendar75"></div></td></tr><tr><td class="fc-axis fc-time fc-widget-content" style="width: 37px;"><span>3am</span></td><td class="fc-widget-content"><div class="linecalendar25"></div><div class="linecalendar50"></div><div class="linecalendar75"></div></td></tr><tr><td class="fc-axis fc-time fc-widget-content" style="width: 37px;"><span>4am</span></td><td class="fc-widget-content"><div class="linecalendar25"></div><div class="linecalendar50"></div><div class="linecalendar75"></div></td></tr><tr><td class="fc-axis fc-time fc-widget-content" style="width: 37px;"><span>5am</span></td><td class="fc-widget-content"><div class="linecalendar25"></div><div class="linecalendar50"></div><div class="linecalendar75"></div></td></tr><tr><td class="fc-axis fc-time fc-widget-content" style="width: 37px;"><span>6am</span></td><td class="fc-widget-content"><div class="linecalendar25"></div><div class="linecalendar50"></div><div class="linecalendar75"></div></td></tr><tr><td class="fc-axis fc-time fc-widget-content" style="width: 37px;"><span>7am</span></td><td class="fc-widget-content"><div class="linecalendar25"></div><div class="linecalendar50"></div><div class="linecalendar75"></div></td></tr><tr><td class="fc-axis fc-time fc-widget-content" style="width: 37px;"><span>8am</span></td><td class="fc-widget-content"><div class="linecalendar25"></div><div class="linecalendar50"></div><div class="linecalendar75"></div></td></tr><tr><td class="fc-axis fc-time fc-widget-content" style="width: 37px;"><span>9am</span></td><td class="fc-widget-content"><div class="linecalendar25"></div><div class="linecalendar50"></div><div class="linecalendar75"></div></td></tr><tr><td class="fc-axis fc-time fc-widget-content" style="width: 37px;"><span>10am</span></td><td class="fc-widget-content"><div class="linecalendar25"></div><div class="linecalendar50"></div><div class="linecalendar75"></div></td></tr><tr><td class="fc-axis fc-time fc-widget-content" style="width: 37px;"><span>11am</span></td><td class="fc-widget-content"><div class="linecalendar25"></div><div class="linecalendar50"></div><div class="linecalendar75"></div></td></tr><tr><td class="fc-axis fc-time fc-widget-content" style="width: 37px;"><span>12pm</span></td><td class="fc-widget-content"><div class="linecalendar25"></div><div class="linecalendar50"></div><div class="linecalendar75"></div></td></tr><tr><td class="fc-axis fc-time fc-widget-content" style="width: 37px;"><span>1pm</span></td><td class="fc-widget-content"><div class="linecalendar25"></div><div class="linecalendar50"></div><div class="linecalendar75"></div></td></tr><tr><td class="fc-axis fc-time fc-widget-content" style="width: 37px;"><span>2pm</span></td><td class="fc-widget-content"><div class="linecalendar25"></div><div class="linecalendar50"></div><div class="linecalendar75"></div></td></tr><tr><td class="fc-axis fc-time fc-widget-content" style="width: 37px;"><span>3pm</span></td><td class="fc-widget-content"><div class="linecalendar25"></div><div class="linecalendar50"></div><div class="linecalendar75"></div></td></tr><tr><td class="fc-axis fc-time fc-widget-content" style="width: 37px;"><span>4pm</span></td><td class="fc-widget-content"><div class="linecalendar25"></div><div class="linecalendar50"></div><div class="linecalendar75"></div></td></tr><tr><td class="fc-axis fc-time fc-widget-content" style="width: 37px;"><span>5pm</span></td><td class="fc-widget-content"><div class="linecalendar25"></div><div class="linecalendar50"></div><div class="linecalendar75"></div></td></tr><tr><td class="fc-axis fc-time fc-widget-content" style="width: 37px;"><span>6pm</span></td><td class="fc-widget-content"><div class="linecalendar25"></div><div class="linecalendar50"></div><div class="linecalendar75"></div></td></tr><tr><td class="fc-axis fc-time fc-widget-content" style="width: 37px;"><span>7pm</span></td><td class="fc-widget-content"><div class="linecalendar25"></div><div class="linecalendar50"></div><div class="linecalendar75"></div></td></tr><tr><td class="fc-axis fc-time fc-widget-content" style="width: 37px;"><span>8pm</span></td><td class="fc-widget-content"><div class="linecalendar25"></div><div class="linecalendar50"></div><div class="linecalendar75"></div></td></tr><tr><td class="fc-axis fc-time fc-widget-content" style="width: 37px;"><span>9pm</span></td><td class="fc-widget-content"><div class="linecalendar25"></div><div class="linecalendar50"></div><div class="linecalendar75"></div></td></tr><tr><td class="fc-axis fc-time fc-widget-content" style="width: 37px;"><span>10pm</span></td><td class="fc-widget-content"><div class="linecalendar25"></div><div class="linecalendar50"></div><div class="linecalendar75"></div></td></tr><tr><td class="fc-axis fc-time fc-widget-content" style="width: 37px;"><span>11pm</span></td><td class="fc-widget-content"><div class="linecalendar25"></div><div class="linecalendar50"></div><div class="linecalendar75"></div></td></tr></tbody></table></div><hr class="fc-divider fc-widget-header" style="display: none;"><div class="fc-content-skeleton"><table><tbody><tr><td style="width: 37px;" class="fc-axis"></td><td><div class="fc-event-container"></div></td><td><div class="fc-event-container"></div></td><td><div class="fc-event-container"></div></td><td><div class="fc-event-container"></div></td><td><div class="fc-event-container"></div></td><td><div class="fc-event-container"></div></td><td><div class="fc-event-container"></div></td></tr></tbody></table></div></div></div></td></tr></tbody></table></div></div></div>
                        <input type="hidden" value="09:48:10" id="timenow">                    
                    </div>
                </div>
                
                <!-- middle ends -->
                
                
                <!-- right side bar -->
                
                <div class="myCol-md-2-5">
              

                </div>
                <!-- right side bar end -->
                
                
            </div>
            <!-- subnavbar ends -->
        </div>
        <!-- Site ends -->

        <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

        <script src="dist/calendar/moment.min.js"></script>
        <script src="dist/calendar/fullcalendar.js"></script>
        <script src="dist/nicescroll/jquery.nicescroll.min.js"></script>

    


<div id="ascrail2000" class="nicescroll-rails" style="width: 5px; z-index: 1; cursor: default; position: absolute; top: 138.1px; left: 1079px; height: 373px; opacity: 0;"><div style="position: relative; top: 152px; float: right; width: 5px; height: 74px; background-color: rgb(145, 145, 145); border: 1px solid rgb(255, 255, 255); background-clip: padding-box; border-radius: 5px;"></div></div></body></html>

＆＃13;

重要的是，您可以看到带有圆角的表格标题。

Answer 2

我在另一个答案上使用了圆角（圆角桌不是实际问题，我就像圆角的桌子）。只是为了踢，与问题无关，但您可以通过单击“项目”或“价格”标题重新排序表。

CSS是您唯一需要的东西，只要您使用正确的表格结构，它就会起作用。

我几乎忘了提到，有一种方法可以创建带圆角和折叠边框的表格（请注意细胞边框与我的桌子相比有多薄。）但是它涉及的更多，我可以尝试处理在一个新问题。

<li>

$(document).ready(function() {
  var table = document.getElementById('xtable'),
    tableHead = table.querySelector('thead'),
    tableHeaders = tableHead.querySelectorAll('th'),
    tableBody = table.querySelector('tbody');

  tableHead.addEventListener('click', function(e) {
    var tableHeader = e.target,
      textContent = tableHeader.textContent,
      tableHeaderIndex, isAscending, order;

    if (textContent !== 'add row') {
      while (tableHeader.nodeName !== 'TH') {
        tableHeader = tableHeader.parentNode;
      }
      tableHeaderIndex = Array.prototype.indexOf.call(tableHeaders, tableHeader);
      isAscending = tableHeader.getAttribute('data-order') === 'asc';
      order = isAscending ? 'desc' : 'asc';
      tableHeader.setAttribute('data-order', order);
      tinysort(tableBody.querySelectorAll('tr'), {
        selector: 'td:nth-child(' + (tableHeaderIndex + 1) + ')',
        order: order
      });
    }
  });
});

table.blue {
  padding: 0;
  box-shadow: 0 1px 9px 1px #ccc;
  border-radius: 6px;
  margin: 20px auto;
}
.blue th {
  color: #FFF;
  background: #2C7EDB;
  padding: 10px;
  text-align: center;
  vertical-align: middle;
}
.blue tr:nth-child(odd) {
  background-color: #333;
  color: #FFF;
}
.blue tr:nth-child(even) {
  background-color: #D3E9FF;
  color: #333;
}
.blue td {
  border-style: solid;
  border-width: 1px;
  border-color: #264D73;
  padding: 5px;
  text-align: left;
  vertical-align: top;
}
.blue thead th:first-child {
  border-top-left-radius: 6px;
}
.blue thead th:last-child {
  border-top-right-radius: 6px;
}
.blue tbody tr:last-child th:first-child {
  border-bottom-left-radius: 6px;
}
.blue tbody tr:last-child td:first-child {
  border-bottom-left-radius: 6px;
}
.blue tbody tr:last-child td:last-child {
  border-bottom-right-radius: 6px;
}

如何绕过FullCalendar jQuery插件的角落？

2 个答案: