Я работаю в проекте bootsrap5, поэтому для данных мне нужно настроить календарь в соответствии с Figma. ⇐ CSS

[Anonymous]

Я работаю в проекте bootstrap5, поэтому для данных мне нужно настроить календарь в соответствии с рис. На данный момент мой календарь является единственной основой, как вы можете видеть на изображении:
[img]https://i.sstatic.net /MBuKVbVpm.jpg[/img]

Но то, как я могу настроить свой код, например календарь США на Figma, - это второе изображение, которое я прилагаю:


Я пытался стилизовать класс таблицы выбора данных, но вообще не работает.

Код: Выделить всё

$(function() {
$('input[name="daterange"]').daterangepicker({
opens: 'right',
locale: {
format: 'MMM D, YYYY',
applyLabel: 'Apliko', // Your "Apliko" button for apply
cancelLabel: 'Cancel',
daysOfWeek: ['MO', 'TU', 'WE', 'TH', 'FR', 'SA', 'SU'],
monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
firstDay: 1
},
startDate: moment().subtract(29, 'days'),
endDate: moment(),
});
});

Код: Выделить всё

.daterangepicker {
width: 752px;
height: 470px;
border-radius: 9px;
border: none;
background: #FFF;
box-shadow: 0px 16px 23.5px 0px rgba(0, 0, 0, 0.15);
}

.daterangepicker:before {
position: relative;
border-right: none;
border-left: none;
top: 0;
}

.daterangepicker .drp-calendar {
margin: 20px;
width: 372px;
}

table>thead>tr:nth-child(1) {
position: relative;
width: 372px;
}

table>thead>tr:nth-child(1)::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background-color: #BDBDBD;
}

.daterangepicker .calendar-table .prev span {
/* background-image: url("/assets/images/chevron-left.png"); */
border: solid #828282;
border-width: 0 2px 2px 0;
/* width: 21px;
height: 21px */
}

.daterangepicker .calendar-table .month {
color: #828282;
text-align: center;
font-size: 17px;
font-style: normal;
font-weight: 600;
line-height: normal;
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/791 ... endar-acco