Comments (14)
@antoine92190 Thanks for your suggestion. I know that grid system is powerful, you can easily control the span and offset of a cell, but in this calendar scenario, what's the benefit can grid system bring comparing to a normal table?
from ionic-calendar.
@twinssbc The problem is when you look closely at the month view, the columns’ width is not even. I’ll admit I care a lot about details, but that’s how you get an awesome product at the end of the day.
For exemple in the month view, if I want to give a border-radius background-color around day numbers which contain an event, this issue becomes really obvious.
Another problem is that day, week and month views are defined under the same table properties. If I want to remove all borders from the month view (which I think is nice), I can’t because it would also remove borders in day and week views. I think rows and columns of each view should have their own property.
Using grid system can efficiently solve all those issues, and make your code much cleaner.
from ionic-calendar.
@antoine92190 Thanks for pointing out the issues. I like people who are "picky" to the product:)
The reason I'm not keen on using grid system is because as you may know this calendar is coming from my another project which is a general Angular Responsive calendar. And I don't want to depend on other css framework such as Bootstrap, that's why I don't use the Bootstrap grid system either.
I think these two issues can be solved by several lines of css styles, using table is not the real root cause.
I will first try to fix them by adding some css styles, if I can't fix them in a clean way, then I will switch to grid system. Thanks.
from ionic-calendar.
@twinssbc I understand, and I also don't like using bootstrap in ionic.
But you did a great job by creating a specific Ionic version, so taking advantage of ionic features such as its own grid system is, in my opinion, what you are aiming for :)
Anyway, as long as those issues are solved, any method is good!
Thanks again for solving it and especially for your awesome work!!
from ionic-calendar.
@antoine92190 I have fixed the issue by just applying table-fixed style to the table.
Feel free to have a test and let me know if any other place requires modification. Thanks.
from ionic-calendar.
Thanks, it works nicely!
There is only one other issue: day, week and month tables are using the same "table-bordered" property.
For exemple, if I want to remove month borders, it also removes day and week borders.
It would be nice to use different properties for each view, for exemple: table-bordered-day, table-bordered-week and table-bordered-month. Would you mind setting that up?
And again, thank you so much!
from ionic-calendar.
@antoine92190 There are already other css classes applied to the tables.
monthview-datetable, weekview-header, weekview-allday-content-table, etc.
I will remove the table-bordered class and add the border to the above classes.
from ionic-calendar.
Great thank you!
from ionic-calendar.
@antoine92190 I tried to move the style in table-bordered into other classes applied to the tables.
I found it's not just a small change.
I have some styles defined as below.
.table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
border: 1px solid #ddd;
}
.table-bordered > thead > tr > th, .table-bordered > thead > tr > td {
border-bottom-width: 2px;
}
If I replace table-bordered with 7 other classes (monthview-datetable, weekview-header, etc) one by one, the css size is increased a lot and I think it will also impact the performance as browser has more selector rules to check.
If you only want to remove the month border, could you just override the style applied to month view table?
For example,
.monthview-datetable
{
border: none !important;
}
. monthview-datetable > thead > tr > th, . monthview-datetable > tbody > tr > th, . monthview-datetable > tfoot > tr > th,
. monthview-datetable > thead > tr > td, . monthview-datetable > tbody > tr > td, . monthview-datetable > tfoot > tr > td {
border: none !important;
}
from ionic-calendar.
@twinssbc That does the trick! Thanks a lot
from ionic-calendar.
@twinssbc Last quick question: are you planning to pull the "step" branch into master?
from ionic-calendar.
@antoine92190 yes, I will.
from ionic-calendar.
@antoine92190 The step branch has been merged to master, it's included in version 0.2.0.
from ionic-calendar.
Hi @antoine92190
Are you able to share your grid system implementation of this calendar?
from ionic-calendar.
Related Issues (20)
- Add bullets to the calendar events instead of background color HOT 1
- Runtime Error - Cannot not read property 'currentDate' of undefined
- How to select multiple events on same date HOT 1
- how did you implemented that tamplate HOT 1
- change the event color HOT 1
- How to change the viewTitle format for day HOT 4
- Refresh events on calander HOT 3
- view to a particular date HOT 4
- Will it work in a cordova project HOT 1
- How to move a day forward and backward with my own inputs? HOT 3
- How to highlight current day in week mode? HOT 3
- Not able to display month events HOT 5
- How to edit week.html and day.html? HOT 1
- EventSourceChanged not working. HOT 1
- Date format HOT 1
- Sliding Issue HOT 1
- Mark Dot Indicator For Event List length on monthviewEventDetailTemplate HOT 1
- not able to customise the style for cell HOT 1
- Dynamic step HOT 1
- upgrade to angular 16.x and ionic 5.x 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 ionic-calendar.