Dots Styling Done

master
Pedram Keshavarzi 3 years ago
parent 44f6c02a02
commit 517175d636
  1. 16
      src/components/Calendar/CalendarComponents/components/DaysList.js
  2. 25
      src/components/Calendar/index.css
  3. 56
      src/components/Calendar/index.js

@ -258,9 +258,9 @@ const DaysList = ({
var eventDate;
for (var i = 0; i < events.length; i++) {
if (sDay == events[i].day) {
return sDay;
}
}
@ -269,9 +269,9 @@ const DaysList = ({
var eventDate;
for (var i = 0; i < events.length; i++) {
if (sDay == events[i].day) {
return(events[i].description);
return (events[i].description);
}
}
}
@ -306,7 +306,7 @@ const DaysList = ({
data-is-default-selectable={shouldEnableKeyboardNavigation}
>
{!isStandard ? '' : getLanguageDigits(day)}
{specialDay(day) == day ? '.' : null}
{specialDay(day) == day ? <span>.</span> : ' '}
</div>
);
};
@ -373,8 +373,8 @@ const DaysList = ({
};
DaysList.defaultProps = {
onChange: () => {},
onDisabledDayError: () => {},
onChange: () => { },
onDisabledDayError: () => { },
disabledDays: [],
calendarTodayClassName: '',
calendarSelectedDayClassName: '',

@ -1,3 +1,7 @@
.Calendar *{
font-family: 'iranSans';
}
.DatePicker {
position: relative;
display: inline-block;
@ -537,7 +541,6 @@
}
.Calendar__day {
display: block;
width: calc(100% / 7 - 6px);
text-align: center;
padding: calc(0.25em - 1px);
@ -548,12 +551,19 @@
margin:3px;
color: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
vertical-align: middle;
background-color: #F3F3F3;
color:#06BACE;
}
.Calendar__day span{
padding: -10px;
margin-top: -30px;
font-size: 28px;
}
.Calendar__day:focus {
@ -691,6 +701,17 @@
margin-top: -10px;
font-size: 20px;
}
.GoToTodayButton{
background-color: #006C94;
padding: 7.5px;
font-size: 12px;
color:white;
font-family: 'iranSans';
border-radius: 50%;
float: left;
margin: 15px;
}
@keyframes fadeCalendar {
from {
opacity: 0;

@ -16,64 +16,12 @@ const SimpleCalendar = () =>{
value={selectedDay}
onChange={setSelectedDay}
shouldHighlightWeekends
renderFooter={() => <center><button onClick={() => setSelectedDay(utils('fa').getToday())}>برو به امروز</button></center>}
// customDaysClassName={specialDays}
locale="fa" // add this
renderFooter={() => <center><button className="GoToTodayButton" onClick={() => setSelectedDay(utils('fa').getToday())}> امروز </button></center>}
locale="fa"
/>
</div>
);
};
// const specialDays = [
// {
// year: 1400,
// month: 10,
// day: 23,
// className: 'specialDay',
// events:[
// {
// id:1,
// title:'دی به دین روز، چهارمین جشن دیگان',
// dotColor: '#eeffds1'
// },
// {
// id:2,
// title:'مصاحبه کاری',
// dotColor: 'red'
// },
// {
// id:3,
// title:'اجاره خانه',
// dotColor: 'blue'
// }
// ]
// },
// {
// year: 1400,
// month: 10,
// day: 16,
// className: 'specialDay holiday'
// },
// {
// year: 1400,
// month: 10,
// day: 30,
// className: 'specialDay'
// },
// {
// year: 1400,
// month: 10,
// day: 4,
// className: 'specialDay'
// },
// {
// year: 1400,
// month: 10,
// day: 13,
// className: 'specialDay'
// },
// ];
export default SimpleCalendar;
Loading…
Cancel
Save