Render Calendar without opening a dialog/modal for Material-UI React - javascript

I'm trying to render Material-UI calendar component without opening a dialog as demonstrated in all picker examples in material-ui-next demo page.
A similar question has been asked here, however the answer's import line doesn't apply anymore for beta version, and furthermore I couldn't find src files of beta version on github, nor the way to import pure calendar component.
Is it not possible to do such thing in v1 beta? If not, should I just use the older version?
Actually, I'm trying to use the calendar component under tab implementations like below, with different calendar dates pick range options as day, week, month, year; which I'll then try to implement out of that Calendar component I'm looking to render. So I thought finding out that component would be the first step to my solution.
Any help would be appreciated, thanks!
etc.

No it is not possible right now, and is a known issue. You can see it here: https://github.com/mui-org/material-ui/issues/4787 and https://github.com/mui-org/material-ui/issues/4796.
It is being discussed for a long time and probably will be in a release soon.
You can use a older version until that update or just use the modal with beta, until a new release.

Related

Day Rendering Hook v5

Im working on Oracle APEX which has the v5 Fullcalendar integrated. Unfortunately they dont offer a direct way to colorize background events on a day basis so I need to add some hook I guess.
I have read this here:
https://fullcalendar.io/docs/day-cell-render-hooks
but need some help on how to write this callback into JS. In the older VErsion v3 I wrote something like this:
dayRender: customDayRender
Best Regards and thank you in advance,
Sebastian

How to hide dates on Angular Calendar?

I'm using Angular 12.0 Calendar and I want to hide the text that shows the day of the month on week view. I've dug through the code and tried looking online but can't find the location of what makes this text appear. I am talking about this one https://mattlewis92.github.io/angular-calendar/#/kitchen-sink
not to be confused with material's.
example
Might be a bit late, but today I needed the same thing and I came out with this.
Docs might be hard to read, but you can find that almost every component inside the Angular Calendar has a templateRef (check this out: https://mattlewis92.github.io/angular-calendar/docs/components/CalendarWeekViewComponent.html#headerTemplate ).
<mwl-calendar-week-view [viewDate]="viewDate" [events]="events"
[hourSegmentTemplate]="weekViewHourSegmentTemplate"
[headerTemplate]="noDateHeaderTemplate"
(eventTimesChanged)="eventTimesChanged($event)" (eventClicked)="eventClicked($event)">
</mwl-calendar-week-view>
After that you need to set [headerTemplate] to a local ng-template. Personally I copied the default template hosted in the repo (you can find it here: https://github.com/mattlewis92/angular-calendar/blob/main/projects/angular-calendar/src/modules/week/calendar-week-view-header.component.ts

Is there a way to get FullCalendar.io events to overlap?

I am looking for a way to make the below overlap rather than stack.
Example Image:
Essentially, just full width if overlap occurs.
I am using fullCalender version 5.
At the time of writing, this isn't possible via the fullCalendar API. You would have to re-write fullCalendar's internal rendering code to suit your purpose. It's possible that could be achieved by creating [custom views], but you would need to study the current fullCalendar source code to understand all the possibilities.
Alternatively, you can see if anyone has requested such a feature and vote for it, or submit your own feature request for the developers on the fullCalendar project to consider. Instructions are here: https://fullcalendar.io/requesting-features

How to create something like jQuery Accordion?

We need to create a FAQ page that has a requirement that clicking the title will open up the answer.
jQuery Accordion popped immediately to mind, and I have spent the last couple of days trying to get that to work with our code.
In short, it can't (at least, not easily) because migrating our version of jquery up from 1.7.1 causes a number of our other controls to break.
All of our controls load from a Template, like the one below:
<?php include(SITE_ROOT.'lib/templates/masterPage.php'); ?>
I could modify masterPage.php to use the latest jquery, but then we would need to stop all of our software department to spend the next few months regression testing. The company is not ready for that.
I have gotten Accordion to work with 1.8.3 and up (see fiddle, but we are locked into 1.7.1 for now.
Is there something else out there that I can use to create this effect besides the latest jQuery?
Is there anything in HTML5? I can use that.
You can create an accordion with HTML 5 and CSS3 see http://www.expression-web-tutorial.com/accordion-menu-tutorial.html
This is a really nice accordion with just plain CSS3, though if you support IE lower than 9, it won't be useful, as it use pseudo classes.
http://tympanus.net/codrops/2012/02/21/accordion-with-css3/
There's also this other one that I remember adapting to my needs on a project I made about a year ago.
http://thecodeplayer.com/walkthrough/vertical-accordion-menu-using-jquery-css3
Again, CSS3, IE will cause issues.
You could try another accordion plugin, there 2 that are bundled with the two best frontend frameworks available
I believe foundation 4 may be compatible with your version of jQuery
http://foundation.zurb.com/develop/download-f4.html
http://foundation.zurb.com/docs/components/accordion.html
or
Bootstrap should work too.
http://blog.getbootstrap.com/2013/05/17/bootstrap-2-3-2-released/
http://getbootstrap.com/2.3.2/javascript.html#collapse
^^^ This is an older version of bootstrap, the newest version might be compatible too. might be worth checking if you go down this route as you would want to be on the latest stable release really.
I prefer foundation by miles though
UPDATE
Foundation don't seem to mention that any specific version of jQuery is required and there seems to be people using zurb foundation 5 with jquery 1.1..... and you can just choose the accordion using the customise tab http://foundation.zurb.com/develop/download.html#customizeFoundation

Show only weeks in Full Calendar jQuery Plugin

I'm using the FullCalendar Plugin available at http://arshaw.com/fullcalendar/
I want a view which shows only weeks for the whole year. The headings must be W1, W2, W3... until W52. There is no need of time or day. My project schedules are by week rather than by date and time.
Is there any view available to show something like this?
Many Thanks
These are the only official avaiable Views:
Fullcalendar Views
There are forks from the master project made by other developers that have year views.
But your specific problem no, sorry.

Categories