Comments (10)
@ImamJanjua is this something that you are looking for? π€
Consider checking the customization playground for more examples. π
from mui-x.
@LukasTy thanks man!
another thing, calendar is not responsive at all and appears to have fixed dimension, does it have something to do with the breakpoints?
Bildschirmaufnahme.2024-05-13.um.10.17.26.mov
from mui-x.
another thing, calendar is not responsive at all and appears to have fixed dimension, does it have something to do with the breakpoints?
Yes, the calendar has a fixed width just as the material design suggests.
Do you have suggestions on how to make it responsive? π€
from mui-x.
@LukasTy shouldn't u know that? π
from mui-x.
shouldn't u know that? π
Well, that's basically an answerβwe don't know of a good way to make the calendar UX friendly and responsive, that's why it has the same fixed width as the material design suggests.
It's enough to fit in the portrait orientation of all the modern smallest mobile devices, so, it seems to do the trick. π€
from mui-x.
@LukasTy does the calendar has breakpoints and can i acess and modify them?
from mui-x.
does the calendar has breakpoints and can i acess and modify them?
No, there are no explicit breakpoints that are used.
If you want to use the theme breakpoints, then access them and override the styles accordingly. π
from mui-x.
@LukasTy thanks!
do u may know how can change the view with custom header?
const DateCalendar: React.FC<DateCalendarProps<Date>> = (props) => {
const Header = () => {
return (
<div className="flex flex-row justify-center gap-8 ">
{/* on press go to next month*/}
<button>
<ChevronLeft size={22} />
</button>
{/* on press go to today*/}
<button>today</button>
{/* on press go to previous month*/}
<button>
<ChevronRight size={22} />
</button>
</div>
);
};
return (
<ThemeProvider theme={theme}>
<Calendar
slots={{
calendarHeader: Header,
}} />
);
};
from mui-x.
@LukasTy thanks!
do u may know how can change the view with custom header?
const DateCalendar: React.FC<DateCalendarProps<Date>> = (props) => { const Header = () => { return ( <div className="flex flex-row justify-center gap-8 "> {/* on press go to next month*/} <button> <ChevronLeft size={22} /> </button> {/* on press go to today*/} <button>today</button> {/* on press go to previous month*/} <button> <ChevronRight size={22} /> </button> </div> ); }; return ( <ThemeProvider theme={theme}> <Calendar slots={{ calendarHeader: Header, }} /> ); };
see this #13116 ... is this issue resolved and can be closed @ImamJanjua?
from mui-x.
The issue has been inactive for 7 days and has been automatically closed.
from mui-x.
Related Issues (20)
- [TreeView] Visually select the ancestors of a selected item HOT 3
- [data grid] Missing translation for key `headerFilterOperatorBetween` HOT 6
- [data grid] Row css class for striped rows HOT 20
- [data grid] Textfield with in renderCell not storing value HOT 7
- [data grid] Format row count numbers in pagination HOT 13
- [pickers] AdapterDateFnsV3: Wrong types generated HOT 1
- [data grid] useGridRootProps should only be used inside the DataGrid, DataGridPro or DataGridPremium component HOT 3
- [data grid] infinite loop occurs under certain circumstances HOT 10
- New component Barcode & QRCode & scanner HOT 1
- [pickers] DateBuilderReturnType provides wrong type with no arg HOT 3
- [data grid] Add support for async valueOptions callback HOT 1
- [pickers][DateTimePicker] page scrolls when mouse is moved outside of it when using hour/minute picker HOT 3
- [docs] Tree View: check children, uncheck parents HOT 3
- [data grid] Column resizing doesn't work from group HOT 1
- [pickers][Datepicker][AdapterDateFnsV3] unable to set single digit day of month format HOT 4
- [charts] LineChart doesn't draw graph on page load HOT 1
- [charts][LineChart] unwanted horizontal line when rendering 100 data points HOT 5
- [data grid] Improve localization dx for custom filters
- [tree view][RichTreeView] Custom styling not working HOT 8
- [data grid] Support edit functionality with server-side data source
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mui-x.