Enhancing the Appearance of MUI Date Calendar

I'm in the process of creating a calendar similar to mui's <DateCalendar />, and I want to customize the header from 'S M T W T F S' to 'Sun Mon...' as well as adjust the position of the arrows.

Before:

https://i.sstatic.net/wJvIY.png

After:

https://i.sstatic.net/USGHB.png

Code :

import * as React from "react";
import { DateCalendar } from "@mui/x-date-pickers/DateCalendar";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import dayjs, { Dayjs } from "dayjs";

export default function Calendar(props) {
  const [value, setValue] = React.useState(dayjs("2022-04-17"));
  return (
    <>
      <LocalizationProvider dateAdapter={AdapterDayjs}>
        <DateCalendar
          value={value}
          onChange={(newValue) => setValue(newValue)}
        />
      </LocalizationProvider>
    </>
  );
}

Is there anyone who can assist me with implementing these changes?

cssreactjsmaterial-ui

Answer №1

I have made an attempt to fulfill your request. Here is the code:

Access CodeSandbox here: View Full Code

Demo.js code snippet:

import * as React from "react";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { DateCalendar } from "@mui/x-date-pickers/DateCalendar";
import dayjs, { Dayjs } from "dayjs";
import DemoStyles from "./DemoStyles";

export default function BasicDateCalendar() {
  const [value, setValue] = React.useState(dayjs("2022-04-17"));
  const classes = DemoStyles();

  return (
    <LocalizeProvider dateAdaptor={AdaptorDayjs}>
      <DateCalendar
        value={value}
        onChange={(newValue) => setValue(newValue)}
        dayOfWeekFormatter={(_day, weekday) => `${weekday.format("ddd")}.`}
        className={classes.muiOverrideClass}
      />
    </LocalizeProvider>
  );
}

DemoStyles.jsx file content:

import { makeStyles } from "@material-ui/core/styles";

const DemoStyles = makeStyles((theme) => ({
  muiOverrideClass: {
    &&.css-kg9q0s-MuiButtonBase-root-MuiIconButton-root-MuiPickersArrowSwitcher-button":
      {
        padding: "0px !important",
      },

    "&.css-cyfsxc-MuiPickersCalendarHeader-labelContainer": {
      marginLeft: "auto !important",
    },

    "&.css-nk89i7-MuiPickersCalendarHeader-root": {
      flexDirection: "row-reverse !important,
      position: relative",
    },

    ".css-1nkg345-MuiButtonBase-root-MuiIconButton-root-MuiPickersArrowSwitcher-button":
      {
        position: absolute,
        right: "25px",
        padding: "0px",
      },
  },
}));

export default DemoStyles;

This approach allows you to override MUI classes as needed. Make adjustments according to your specific needs.

Refer to this codesandbox link for more details on the code implementation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Easiest method to change cursor to 'wait' and then return all elements to their original state

On my website, there are certain CSS classes that define a specific cursor style when hovered over. I am trying to implement a feature where the cursor changes to a "wait" image whenever an AJAX call is initiated on any part of the page, and then reverts b ...

javascriptjquerycss

Card Alignment with Bootstrap

I need help aligning the last two elements in the card. I want the first one (a button) to be on the left, and another element (a Div with multiple social icon images) on the right side. Can someone provide guidance on how to achieve this layout? <!D ...

htmlcsstwitter-bootstrapbootstrap-5

Calculate the occurrences of numbers within a string in an array of objects containing a specific string each time an object is removed

I am facing an issue where I need to re-number strings based on their type, regardless of their previous number. For example, if I delete Oranges 2 from [Oranges 1, Oranges 2, Oranges 3], it should become [Oranges 1, Oranges 2]. This means the numbers shou ...

javascriptreactjsecmascript-6

How to align items at the center in material-ui styling

I have a row of cards inside a container that I want to align in the center with equal spacing around them. I am using the material-ui UI library for the layout. Despite adding the justifyContent: center property, the cards are not evenly spaced. This is ...

cssreactjsmaterial-ui

Ways to eliminate the Horizontal scroll bar

Currently, I am in the process of transforming a Static Page into a Responsive Page. However, when I resize my page to a lower width, I notice that a horizontal scroll-bar appears along with some margins at the bottom and right side of the last div/Footer. ...

htmlcssresponsiveness

What is the best way to modify a React ref when the child elements of ref.current are altered?

I'm currently utilizing React refs for managing click events outside of an element. import { useEffect } from 'react'; export const useClickOutside = (ref, callback = () => {}) => { const handleClick = e => { if (ref.current ...

javascriptreactjsreact-hooks

Using react-scripts can create security vulnerabilities

I encountered an issue in the terminal and uninstalled react-scripts in an attempt to fix it. However, upon running npm install react-scripts, I received the following warnings: Cole@Coles-MacBook-Pro-4 client % npm i react-scripts npm WARN deprecated @ha ...

node.jsreactjsnpmnpm-startreact-scripts

What is the best way to create divs that can close and hide themselves when clicked from inside the div itself?

I have a situation in my code where clicking a link reveals a div, and then the same link must be clicked again to hide it. However, I want to modify this so that any link within the div can also hide it when clicked. I currently have eight divs set up lik ...

javascriptjquerycsshtmlshow-hide

housing the picture within a CSS grid

I am new to working with css grids and I have encountered an issue. The background image I want to use is larger than the size of the grid itself. How can I make the image fit within the grid without exceeding its boundaries? When I attempt to insert the ...

htmlcsscss-grid

What is the best way to differentiate between the content in the 'stories' and '.storybook' directories?

Overview Upon integrating Storybook.js with my existing Create-React-App project, I found that two new directories were created by default: .storybook src/stories This integration seemed to blur the lines between different aspects of my project, which g ...

reactjstypescriptwebpackstorybookreact-typescript

Testing Next.js's getServerSideProps function with Jest: A Step-by-Step Guide

I want to conduct Jest and Enzyme tests on the Next.js getServerSideProps function. This function is structured as follows: export const getServerSideProps: GetServerSideProps = async (context) => { const id = context?.params?.id; const businessName ...

reactjstypescriptjestjsnext.js

Challenges with border-color and CSS input:focus

The dilemma Currently, I am immersed in a project focusing on constructing a front end using bootstrap4. In order to align with the company's main color scheme, I decided to alter the highlighting color of inputs. To achieve this, I made the followi ...

htmlcssinputbootstrap-4frontend

Angular components are not properly adhering to the specified height and width dimensions for child elements

I seem to be having trouble applying height/width to a child component in angular. Can someone take a look and point out where I may have gone wrong? app.component.html <app-child [width]="10" [height]="10"></app-child> .child.ts import { C ...

cssangular

How to obtain the image URL generated by Firebase storage once uploaded and store it in Firestore using React?

Is there a way for me to easily upload an image and retrieve its URL in order to save it to Firestore? My goal is to store the URL of the uploaded image in an object. I want to ensure that the await function waits for the upload process to finish before fe ...

reactjsimagefirebasegoogle-cloud-firestorefirebase-storage

What is the best way to refresh the mapRef in React-Leaflet V4 while utilizing React-Redux?

I am currently utilizing react-leaflet version 4.x. My goal is to adjust the zoom level of the map when a button is clicked, as a simple use case. I understand that one option is to create a child component for <MapContainer> and utilize useMap(), b ...

reactjsreduxreact-reduxleafletreact-leaflet

Browserify Rails encountered an error - ParseError: Error with 'import' and 'export'. These statements can only appear with 'sourceType: module'

Recently, I encountered an issue while trying to integrate an NPM package into my Rails application. The problem I'm facing can be seen in the following image: https://i.stack.imgur.com/cIOw8.png I searched this forum for similar issues but found tha ...

javascriptruby-on-railsnode.jsreactjsnpm

Click on the logo to return to the home page

Logo Link Causing Menu Alignment Issue After setting the logo as a link, the menu unexpectedly shifts to the right. Upon inspecting the menu element, it appears that there is an additional hidden menu link on the left side leading to index.html. Can anyon ...

htmlcsshyperlink

Caution: It is not permitted for `<a>` to be nested within another `<a>` tag when working on a Gatsby JS project

I'm currently working with Gatsby JS and react-bootstrap but I'm facing an issue regarding routing. I'm not sure how to properly utilize Gatsby's native routing alongside react-bootstrap, which seems to be using react-router. I attempte ...

reactjsgatsbyreact-bootstrap

Tips on displaying the number of items ordered above the cart icon

Hey there, I've been attempting to place a number in the top left corner of a cart icon without success. My goal is to achieve a result similar to the image shown here: enter image description here Here is the code snippet I've been using: < ...

htmlcssreactjsiconsstyled-components

NextJS able to execute code on the client side after being called from the server side

I am currently using getStaticProps to retrieve data from the server at build time and pass it to my page component. The following call is made from my page component file: const getStaticProps: GetStaticProps = async (context) => { const pa ...

javascriptreactjsnext.js