Comments (2)
Not exactly. In this control, events float above the calendar (absolute positioning and higher z-index). This is an important point, because it means there is no event content flow within a particular day's "cell." This is why events must all have the same height--otherwise, it would be far more difficult to position them. But it's also what allows multi-day events, which was a core use case for me.
In the example you linked, the pill-rounded events shown above the colorful content would be a very good match for what this component does. But the cards and icons also shown on the week/month views, not so much. That said, the content of each day's cell is accessible using the dayContent
slot, so you could create the cards / icons within this area, with four important caveats:
-
Your parent control would be responsible for rendering them on the correct day, they wouldn't be part of the
events
prop. -
A change is coming in 3.0 (soon, you can pull the current branch to see) that will result in the day of the month being outside/below the
dayContent
slot. This will actually help, since you won't have to worry about rendering the day number on your own. -
You would need to vertically position your cards/icons below the
events
sent in through the props, otherwise the events will be on top of your content. It may be possible to modify the code to pass the number of events visible on a given day as part of thedayContent
slot, but it would take some work to make this happen and make it efficient (this is currently only computed in the local variableeventRows
, once for each week, as part of drawing the events, which happens separately from rendering the days). I'm open to pull requests on the version 3 branch if you want to take a stab at this. (What I'm envisioning is a class added todayContent
that would give it the top margin needed to push itself below the events). -
By design, every day of every week visible in the calendar has the same height. This can be problematic if you're expecting a day to stretch vertically for weeks with more events stacked in a given day. It could be done, but you'd be overriding some CSS to do so, and that sort of override couldn't be guaranteed to be compatible with future versions.
from vue-simple-calendar.
Thanks @richardtallent for such a detailed reply - will carefully read through your response and think about how we might be able to adapt the calendar :)
from vue-simple-calendar.
Related Issues (20)
- headerProps return current periode HOT 1
- add a "day" view HOT 1
- Announcement: I'm at VueConfUS
- sometimes getting stuck for even 140 seconds, need some help :) HOT 3
- periodChanged npm update HOT 2
- Modify height for every cells HOT 1
- Cannot change font color for startTime/endTime HOT 3
- Bug when using item specific classes HOT 6
- do we support drag in batch? HOT 1
- delete this
- tooltip doesn't work HOT 2
- Misaligned row in demo HOT 4
- missing export in package.json HOT 3
- Clicking & URL issues HOT 2
- How can we get the selected object from the array? HOT 1
- Error of import HOT 3
- Feature Request: Show weekdays only HOT 1
- Error when importing vue-simple-calendar/dist/style.css HOT 3
- Can't use named slots with camelCase like dayContent HOT 2
- Time slots in weekly view HOT 1
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 vue-simple-calendar.