Q - How to remove border bottom of dates in list view of in FullCalendar JS Library ?

Moderator: mindphp

Raja Pdl
PHP VIP Members
PHP VIP Members
โพสต์: 2241
ลงทะเบียนเมื่อ: 27/05/2024 9:50 am

Q - How to remove border bottom of dates in list view of in FullCalendar JS Library ?

โพสต์ที่ยังไม่ได้อ่าน โดย Raja Pdl »

Q - How to remove border bottom of dates in list view of in FullCalendar JS Library ?

In FullCalendar JS library, I want to remove the line that divides between dates and events. I tried using the classes ".fc .fc-list-day-cushion", ".fc-list-day", ".fc-cell-shaded" by inspecting the elements, but it is not removing that line that divides between dates and events. How can I fix it ?

โค้ด: เลือกทั้งหมด

<body>
    <div id="calendar" class="m-5"></div>
    
</body>

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

        var calendar = new FullCalendar.Calendar(calendarEl, { 
            locale : 'en', 
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'

            },

            events: [
                { id: 1, title: "Event 1", start: "2024-11-01" },
                { id: 2, title: "Event 2", start: "2024-11-01" },
                { id: 3, title: "Event 3", start: "2024-11-03" },
                { id: 3, title: "Event 4", start: "2024-11-07" },
            ],  
        });
        calendar.render();

โค้ด: เลือกทั้งหมด

        .fc .fc-list-day-cushion {
            border-bottom: none !important;
            background-color: white !important;
        }

        .fc-list-day > div {
            border-bottom: none !important;
        }

        .fc-cell-shaded {
            border-color: none !important;
        }
MindPHP Assistant

Re: Q - How to remove border bottom of dates in list view of in FullCalendar JS Library ?

โพสต์ที่ยังไม่ได้อ่าน โดย MindPHP Assistant »

To remove the border (or line) that divides between dates and events in the list view of FullCalendar, you will need to target the correct CSS classes and set them to have no borders. The problem could be due to the specific classes you are trying to target, or the specific CSS properties you are using.

Here is a refined approach to remove the borders in the list view:

โค้ด: เลือกทั้งหมด

html
<body>
  <div id="calendar" class="m-5"></div>

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

      var calendar = new FullCalendar.Calendar(calendarEl, {
        locale: 'en',
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
        },
        events: [
          { id: 1, title: "Event 1", start: "2024-11-01" },
          { id: 2, title: "Event 2", start: "2024-11-01" },
          { id: 3, title: "Event 3", start: "2024-11-03" },
          { id: 4, title: "Event 4", start: "2024-11-07" },
        ],
      });

      calendar.render();
    });
  </script>

  <style>
    /* Remove the border below the date in list view */
    .fc-list-day-cushion {
      border-bottom: none !important;
    }

    /* Remove the border below each event in the list */
    .fc-list-event {
      border-bottom: none !important;
    }
  </style>
</body>
### Explanation:

1. **`.fc-list-day-cushion`**: This class is used to style the date area in the list view. Setting `border-bottom: none` removes the line under the date.

2. **`.fc-list-event`**: This class is used for each event item in the list view. By setting `border-bottom: none`, you remove the line under each event.

**Note:** It is important to use `!important` to override any default styling that FullCalendar applies. If you have other CSS that might conflict, ensure your styles are loaded after FullCalendar's styles.

This should help you achieve the desired styling by removing unnecessary lines in the list view. Adjust the CSS selectors as needed based on the actual HTML structure rendered by FullCalendar, as these may vary based on version changes or other customizations.
Raja Pdl
PHP VIP Members
PHP VIP Members
โพสต์: 2241
ลงทะเบียนเมื่อ: 27/05/2024 9:50 am

Re: Q - How to remove border bottom of dates in list view of in FullCalendar JS Library ?

โพสต์ที่ยังไม่ได้อ่าน โดย Raja Pdl »

MindPHP Assistant เขียน: 14/11/2024 10:08 am To remove the border (or line) that divides between dates and events in the list view of FullCalendar, you will need to target the correct CSS classes and set them to have no borders. The problem could be due to the specific classes you are trying to target, or the specific CSS properties you are using.

Here is a refined approach to remove the borders in the list view:

โค้ด: เลือกทั้งหมด

html
<body>
  <div id="calendar" class="m-5"></div>

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

      var calendar = new FullCalendar.Calendar(calendarEl, {
        locale: 'en',
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
        },
        events: [
          { id: 1, title: "Event 1", start: "2024-11-01" },
          { id: 2, title: "Event 2", start: "2024-11-01" },
          { id: 3, title: "Event 3", start: "2024-11-03" },
          { id: 4, title: "Event 4", start: "2024-11-07" },
        ],
      });

      calendar.render();
    });
  </script>

  <style>
    /* Remove the border below the date in list view */
    .fc-list-day-cushion {
      border-bottom: none !important;
    }

    /* Remove the border below each event in the list */
    .fc-list-event {
      border-bottom: none !important;
    }
  </style>
</body>
### Explanation:

1. **`.fc-list-day-cushion`**: This class is used to style the date area in the list view. Setting `border-bottom: none` removes the line under the date.

2. **`.fc-list-event`**: This class is used for each event item in the list view. By setting `border-bottom: none`, you remove the line under each event.

**Note:** It is important to use `!important` to override any default styling that FullCalendar applies. If you have other CSS that might conflict, ensure your styles are loaded after FullCalendar's styles.

This should help you achieve the desired styling by removing unnecessary lines in the list view. Adjust the CSS selectors as needed based on the actual HTML structure rendered by FullCalendar, as these may vary based on version changes or other customizations.
I added "!important" , but still displaying the divider between events and dates

โค้ด: เลือกทั้งหมด


.fc-list-day-cushion {
      border-bottom: none !important;
    }

    .fc-list-event {
      border-bottom: none !important;
    }
MindPHP Assistant

Re: Q - How to remove border bottom of dates in list view of in FullCalendar JS Library ?

โพสต์ที่ยังไม่ได้อ่าน โดย MindPHP Assistant »

If the borders are still appearing despite using `!important`, there could be other CSS rules or styles applied by FullCalendar or other styles in your project taking precedence. Here are a few steps to troubleshoot and ensure the borders are removed:

1. **Inspect with Developer Tools:** Use your browser's developer tools to inspect the elements in the list view. Check the computed styles for the elements and see if there are any other border styles applied that need to be overridden.

2. **Higher Specificity:** If `!important` is not resolving the issue, consider increasing the specificity of your CSS selectors. You can do this by using more specific selectors, such as:

โค้ด: เลือกทั้งหมด

css
   #calendar .fc-list-day-cushion {
     border-bottom: none !important;
   }

   #calendar .fc-list-event {
     border-bottom: none !important;
   }
   
3. **Check for Other Elements:** Sometimes, additional elements or pseudo-elements may be responsible for drawing lines or borders. Check for any sibling elements or pseudo-elements like `::before` or `::after` that might add borders.

4. **Version Consistency:** Ensure that the version of FullCalendar you are using matches the CSS being applied. There might be differences in class names or structure between versions.

5. **Custom Styles from FullCalendar:** Sometimes, FullCalendar might include additional styles or wrappers that affect the appearance. Make sure you inspect any parent elements and see if they have padding, margins, or borders affecting the layout.

6. **Test with Scoped Styles:** You can try temporarily removing other styles or applying your styles inline directly via JavaScript after the calendar renders as a test:

โค้ด: เลือกทั้งหมด

javascript
   document.querySelectorAll('.fc-list-day-cushion, .fc-list-event').forEach(function(el) {
     el.style.borderBottom = 'none';
   });
   
If none of these steps help resolve the issue, please provide more details about the CSS rules being applied (by inspecting the elements) or any additional FullCalendar settings that might affect the list view's layout. This way, I can provide more targeted advice.
Raja Pdl
PHP VIP Members
PHP VIP Members
โพสต์: 2241
ลงทะเบียนเมื่อ: 27/05/2024 9:50 am

Re: Q - How to remove border bottom of dates in list view of in FullCalendar JS Library ?

โพสต์ที่ยังไม่ได้อ่าน โดย Raja Pdl »

MindPHP Assistant เขียน: 14/11/2024 10:36 am If the borders are still appearing despite using `!important`, there could be other CSS rules or styles applied by FullCalendar or other styles in your project taking precedence. Here are a few steps to troubleshoot and ensure the borders are removed:

1. **Inspect with Developer Tools:** Use your browser's developer tools to inspect the elements in the list view. Check the computed styles for the elements and see if there are any other border styles applied that need to be overridden.

2. **Higher Specificity:** If `!important` is not resolving the issue, consider increasing the specificity of your CSS selectors. You can do this by using more specific selectors, such as:

โค้ด: เลือกทั้งหมด

css
   #calendar .fc-list-day-cushion {
     border-bottom: none !important;
   }

   #calendar .fc-list-event {
     border-bottom: none !important;
   }
   
3. **Check for Other Elements:** Sometimes, additional elements or pseudo-elements may be responsible for drawing lines or borders. Check for any sibling elements or pseudo-elements like `::before` or `::after` that might add borders.

4. **Version Consistency:** Ensure that the version of FullCalendar you are using matches the CSS being applied. There might be differences in class names or structure between versions.

5. **Custom Styles from FullCalendar:** Sometimes, FullCalendar might include additional styles or wrappers that affect the appearance. Make sure you inspect any parent elements and see if they have padding, margins, or borders affecting the layout.

6. **Test with Scoped Styles:** You can try temporarily removing other styles or applying your styles inline directly via JavaScript after the calendar renders as a test:

โค้ด: เลือกทั้งหมด

javascript
   document.querySelectorAll('.fc-list-day-cushion, .fc-list-event').forEach(function(el) {
     el.style.borderBottom = 'none';
   });
   
If none of these steps help resolve the issue, please provide more details about the CSS rules being applied (by inspecting the elements) or any additional FullCalendar settings that might affect the list view's layout. This way, I can provide more targeted advice.
Does this FullCalendar use <table> for list view ?
MindPHP Assistant

Re: Q - How to remove border bottom of dates in list view of in FullCalendar JS Library ?

โพสต์ที่ยังไม่ได้อ่าน โดย MindPHP Assistant »

FullCalendar, a popular JavaScript library for creating interactive calendars, does not use `<table>` elements for its list view. Instead, it typically relies on `<div>` elements to structure its list views. This approach allows for greater flexibility and styling options with CSS.

If you're having trouble with CSS styles like borders not being removed as expected, here’s what you can do:

1. **Inspect Element:** Use your browser’s developer tools to examine the HTML structure and see exactly which elements have borders. This will help you identify if there are additional styles that need to be overridden.

2. **Override Styles:** Once you identify the specific elements, ensure your CSS selectors are specific enough to override existing styles. You can increase specificity by adding more context to your selectors or using `!important` judiciously (though use it sparingly).

3. **Use Proper Selectors:** Since FullCalendar uses `<div>`s in the list view, you should target the classes or IDs used by these `<div>`s. For example:

โค้ด: เลือกทั้งหมด

css
   #calendar .fc-list-day-cushion,
   #calendar .fc-list-event {
     border-bottom: none !important;
   }
   
4. **Custom JavaScript Adjustments:** If CSS alone doesn’t resolve the issue, consider using JavaScript to directly manipulate styles after the calendar has rendered:

โค้ด: เลือกทั้งหมด

javascript
   document.querySelectorAll('.fc-list-day-cushion, .fc-list-event').forEach(function(el) {
     el.style.borderBottom = 'none';
   });
   
5. **FullCalendar Version:** Ensure you are using the correct version of FullCalendar and that any custom styles or overrides you implement correspond to the class names and structure used in that version.

By following these steps, you should be able to address the issue of unwanted borders in FullCalendar's list view. If the problem persists, double-check for any additional CSS files or frameworks that might be applying global styles affecting your calendar.
Raja Pdl
PHP VIP Members
PHP VIP Members
โพสต์: 2241
ลงทะเบียนเมื่อ: 27/05/2024 9:50 am

Re: Q - How to remove border bottom of dates in list view of in FullCalendar JS Library ?

โพสต์ที่ยังไม่ได้อ่าน โดย Raja Pdl »

It uses the classes ".fc .fc-list-table td", ".fc .fc-list-table th" for list title and content
and fixed by using the classes

โค้ด: เลือกทั้งหมด

.fc .fc-list-table td {
    border-top: none !important;
}

.fc-list-table th {
    border-bottom: none !important;
}
Raja Pdl
PHP VIP Members
PHP VIP Members
โพสต์: 2241
ลงทะเบียนเมื่อ: 27/05/2024 9:50 am

Re: Q - How to remove border bottom of dates in list view of in FullCalendar JS Library ?

โพสต์ที่ยังไม่ได้อ่าน โดย Raja Pdl »

MindPHP Assistant เขียน: 14/11/2024 11:50 am FullCalendar, a popular JavaScript library for creating interactive calendars, does not use `<table>` elements for its list view. Instead, it typically relies on `<div>` elements to structure its list views. This approach allows for greater flexibility and styling options with CSS.

If you're having trouble with CSS styles like borders not being removed as expected, here’s what you can do:

1. **Inspect Element:** Use your browser’s developer tools to examine the HTML structure and see exactly which elements have borders. This will help you identify if there are additional styles that need to be overridden.

2. **Override Styles:** Once you identify the specific elements, ensure your CSS selectors are specific enough to override existing styles. You can increase specificity by adding more context to your selectors or using `!important` judiciously (though use it sparingly).

3. **Use Proper Selectors:** Since FullCalendar uses `<div>`s in the list view, you should target the classes or IDs used by these `<div>`s. For example:

โค้ด: เลือกทั้งหมด

css
   #calendar .fc-list-day-cushion,
   #calendar .fc-list-event {
     border-bottom: none !important;
   }
   
4. **Custom JavaScript Adjustments:** If CSS alone doesn’t resolve the issue, consider using JavaScript to directly manipulate styles after the calendar has rendered:

โค้ด: เลือกทั้งหมด

javascript
   document.querySelectorAll('.fc-list-day-cushion, .fc-list-event').forEach(function(el) {
     el.style.borderBottom = 'none';
   });
   
5. **FullCalendar Version:** Ensure you are using the correct version of FullCalendar and that any custom styles or overrides you implement correspond to the class names and structure used in that version.

By following these steps, you should be able to address the issue of unwanted borders in FullCalendar's list view. If the problem persists, double-check for any additional CSS files or frameworks that might be applying global styles affecting your calendar.
It uses the classes ".fc .fc-list-table td", ".fc .fc-list-table th" for list title and content
and fixed by using the classes

โค้ด: เลือกทั้งหมด

.fc .fc-list-table td {
    border-top: none !important;
}

.fc-list-table th {
    border-bottom: none !important;
}
now it doesn't display line divider between events and date, but for the last date or last event in list view, I want to add border bottom , how can I do ?
MindPHP Assistant

Re: Q - How to remove border bottom of dates in list view of in FullCalendar JS Library ?

โพสต์ที่ยังไม่ได้อ่าน โดย MindPHP Assistant »

To add a border at the bottom of the last date or the last event in the FullCalendar's list view, you can use CSS pseudo-selectors such as `:last-child` or `:last-of-type`. Here’s how you can achieve this:

1. **Identify the Last Element:** You'll want to target the last `.fc-list-day-cushion` or `.fc-list-event` in the list view to add a border.

2. **Use CSS Pseudo-Selectors:** You can use CSS selectors like `:last-child` or `:last-of-type` to apply styles to the last element in a parent container.

Here is an example of how you might achieve this:

โค้ด: เลือกทั้งหมด

css
/* Add border to the last event */
.fc-list-event:last-child {
    border-bottom: 1px solid #yourColor !important;
}

/* Add border to the last day cushion */
.fc-list-day-cushion:last-child {
    border-bottom: 1px solid #yourColor !important;
}
**Important Notes:**

- Replace `#yourColor` with the desired border color.
- Make sure your CSS is applied after any other FullCalendar styles, so it properly overrides them.
- If `:last-child` does not work because of the structure of the HTML (e.g., if other elements are present in the parent), consider using `:last-of-type` or adjusting the parent context to ensure you are targeting the correct element.
- Remember to test in different browsers to ensure consistent behavior.

If your HTML structure is more complex, you might need to adjust the selectors based on the specific layout. If FullCalendar generates additional wrapping elements, inspect the rendered HTML to ensure you are targeting the correct elements.
Raja Pdl
PHP VIP Members
PHP VIP Members
โพสต์: 2241
ลงทะเบียนเมื่อ: 27/05/2024 9:50 am

Re: Q - How to remove border bottom of dates in list view of in FullCalendar JS Library ?

โพสต์ที่ยังไม่ได้อ่าน โดย Raja Pdl »

MindPHP Assistant เขียน: 14/11/2024 3:20 pm To add a border at the bottom of the last date or the last event in the FullCalendar's list view, you can use CSS pseudo-selectors such as `:last-child` or `:last-of-type`. Here’s how you can achieve this:

1. **Identify the Last Element:** You'll want to target the last `.fc-list-day-cushion` or `.fc-list-event` in the list view to add a border.

2. **Use CSS Pseudo-Selectors:** You can use CSS selectors like `:last-child` or `:last-of-type` to apply styles to the last element in a parent container.

Here is an example of how you might achieve this:

โค้ด: เลือกทั้งหมด

css
/* Add border to the last event */
.fc-list-event:last-child {
    border-bottom: 1px solid #yourColor !important;
}

/* Add border to the last day cushion */
.fc-list-day-cushion:last-child {
    border-bottom: 1px solid #yourColor !important;
}
**Important Notes:**

- Replace `#yourColor` with the desired border color.
- Make sure your CSS is applied after any other FullCalendar styles, so it properly overrides them.
- If `:last-child` does not work because of the structure of the HTML (e.g., if other elements are present in the parent), consider using `:last-of-type` or adjusting the parent context to ensure you are targeting the correct element.
- Remember to test in different browsers to ensure consistent behavior.

If your HTML structure is more complex, you might need to adjust the selectors based on the specific layout. If FullCalendar generates additional wrapping elements, inspect the rendered HTML to ensure you are targeting the correct elements.
Not working with this answer.

With the following codes,

โค้ด: เลือกทั้งหมด

.fc .fc-list-table td {
    border-top: none !important;
}

.fc-list-table th {
    border-bottom: none !important;
}
it displays as I want for date header and event, but for the last event, it is not displaying the border bottom . Is there any other way to fix it ?
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 3