I would like to change the style of dates in my month calendar view which have events.
This is the design I'm developing:
So I need to change style of .rbc-date-cell to blue for each date with an event. I have searched high and low for a solution to this, most commonly I find examples for creating a CustomDateCell for dateCellWrapper which will conditionally style cells, here's one example I've tried:
React Big Calendar how to style a single day in the month view
This changes the style of .rbc-day-bg not .rbc-date-cell. The markup on RBC is complex, because the devs made it for events which can stretch over multiple days. This means that the background divs are in a different parent to the datecells. I'd prefer not to traverse/manipulate the DOM to style these cells.
Surely there must be a way to style the datecells? the docs and all answers I've found on SO and github haven't yielded anything so far. Could it be done with eventPropGetter?
EDIT
The HTML is as follows. I've also tried custom slot props and eventPropgetter but have not been able to directly manipulate the rendering of .rbc-date-cell
<div class="rbc-month-row">
<div class="rbc-row-bg">
<div class="rbc-day-bg" style="background-color: lightgreen;"></div>
<div class="rbc-day-bg" style="background-color: lightgreen;"></div>
<div class="rbc-day-bg rbc-today" style="background-color: lightgreen;"></div>
<div class="rbc-day-bg" style="background-color: lightblue;"></div>
<div class="rbc-day-bg" style="background-color: lightblue;"></div>
<div class="rbc-day-bg" style="background-color: lightblue;"></div>
<div class="rbc-day-bg" style="background-color: lightblue;"></div>
</div>
<div class="rbc-row-content">
<div class="rbc-row">
<div class="rbc-date-cell">13</div>
<div class="rbc-date-cell">14</div>
<div class="rbc-date-cell rbc-now rbc-current">15</div>
<div class="rbc-date-cell">16</div>
<div class="rbc-date-cell">17</div>
<div class="rbc-date-cell">18</div>
<div class="rbc-date-cell">19</div>
</div>
</div>
</div>
rbc-event's exist in a different row to the rbc-date-cell, in this markup there are events on the 23rd and 24th. I don't want to traverse the DOM to conditionally style divs as this isn't a very React way of doing things, it should be done before rendering if possible
<div class="rbc-row-content">
<div class="rbc-row ">
<div class="rbc-date-cell">21</div>
<div class="rbc-date-cell">22</div>
<div class="rbc-date-cell">23</div>
<div class="rbc-date-cell">24</div>
<div class="rbc-date-cell">25</div>
<div class="rbc-date-cell">26</div>
<div class="rbc-date-cell">27</div>
</div>
<div class="rbc-row">
<div class="rbc-row-segment" style="flex-basis: 28.5714%; max-width: 28.5714%;"> </div>
<div class="rbc-row-segment" style="flex-basis: 14.2857%; max-width: 14.2857%;"><button class="rbc-event"><div class="rbc-event-content" title="2/2"><p class="event-wrapper">2/2</p></div></button></div>
<div class="rbc-row-segment" style="flex-basis: 14.2857%; max-width: 14.2857%;"><button class="rbc-event"><div class="rbc-event-content" title="1/1"><p class="event-wrapper">1/1</p></div></button></div>
</div>
</div>
checkout this sandbox code https://codesandbox.io/s/73ky8rj2qj
if that's what you want to achieve so the main idea is to override month dateHeader and then with every dateHeader to render check if its date prop is between any event startDate and endDate and render it with the desired style
Related
I want to find element div with class=parent-class whose three children should have same class=no-data using xpath or css selector.
i.e all three > 3rd, 4th & 5th child div of parent class should have 'no-data' class.
example:
<div class="main">
<div class="parent-class">
<div class="child-1">child1</div>
<div class="child-2">child2</div>
<div class="no-data">NA</div>
<div class="data">xyz</div>
<div class="data">ijk</div>
</div>
<div class="parent-class">
<div class="child-1">child1</div>
<div class="child-2">child2</div>
<div class="no-data">NA</div>
<div class="no-data">NA</div>
<div class="no-data">NA</div>
</div>
<div class="parent-class">
<div class="child-1">child1</div>
<div class="child-2">child2</div>
<div class="data">abc</div>
<div class="data">xyz</div>
<div class="data">ijk</div>
</div>
<div class="parent-class">
<div class="child-1">child1</div>
<div class="child-2">child2</div>
<div class="no-data">NA</div>
<div class="no-data">NA</div>
<div class="data">ijk</div>
</div>
</div>
Tried below solution: it works for me
//div[contains(#class,'parent-class') and div[#class='no-data'][1] and div[#class='no-data'][2] and div[#class='no-data'][3]]
or
//div[contains(#class,'parent-class') and (div[#class='no-data'][1] and div[#class='no-data'][2] and div[#class='no-data'][3])]
Though looking for some better solution
You can use below given xpath to trace your required elements.
//div[#class='main']//child::div[2]//
child::div[#class='no-data'][1]
//div[#class='main']//child::div[2]//
child::div[#class='no-data'][2]
//div[#class='main']//child::div[2]//
child::div[#class='no-data'][3]
I think this should do it:
//div[#class='parent-class'][not(div[(position()>2 and position()<6) and .[#class != 'no-data']])]
As far as I understood your requirement it should be something like:
//div[#class='parent-class' and count(descendant::div[#class='no-data'])=3]
where:
descendant - is XPath Axis returning children of the current node and their children
count() - is XPath Function returning the number of nodes matching the expression
Therefore above expression will match div tag having 3 children with no-data class
I have a very simple set up in place, that looks like this:
<div class="row">
<div id="whoarewe" class="offset-2 col-lg-4 col-md-4 col-xs-12 col-sm-12"></div>
<div id="whatwedo" class="col-lg-4 col-md-4 cold-sm-12 col-xs12>
</div>
</div>
The thing is, in responsive mode, the id #whoarewe still has the 2 column offset, therefore is not lined up vertically with #whatwedo. Is there any way I can do this with simply a media query? or is there a bootstrap property that would take care of it in col-xs and col-sm?
I tried to set col-lg-offset-2 and col-sm-offset-0 but this didn't work :(
Thanks.
I came up with a solution that works in my case, basically using a row property called justify-content-around like so:
<div class="row justify-content-around">
<div class="col-lg-4"></div>
<div class="col-log-4></div>
</div>
<div class="row">
<div id="whoarewe" class="col-md-4 offset-md-2"></div>
<div id="whatwedo" class="col-md-4"></div>
</div>
Refer to the documentation for correct offset classes:
https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns
Otherwise you can set the column width and do some flex magic by justifying content as per your need
https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content
I am building an application using Ionic (version 1) and would like to hide a div from the controller when the user is scrolling. I am stuck and don't know where to start.
This is my code:
<body ng-app="starter" style="padding-top:150px;">
<div ng-controller="AppCtrl" id="header" >
<div class="bar-aaa">
<div class="myLogo">
<img src="img/images/logo.png" style="display: block;margin-left:auto;margin-right:auto;height:50px;margin-top:10px;margin-bottom:30px;" alt=""/>
</div>
<div class="row" style="padding-bottom: 0px;">
<div class="col col-33" style="border-bottom: 2px solid {{oneLine}};margin-bottom: 0;height: 59px;"><img src="{{one}}" style="display: block;margin-left:auto;margin-right:auto;" alt=""/></div>
<div class="col col-33" style="border-bottom: 2px solid {{twoLine}};margin-bottom: 0;height: 59px;"><img src="{{two}}" style="height:17px;display: block;margin-left:auto;margin-right:auto;" alt=""/></div>
<div class="col col-33" style="border-bottom: 2px solid {{threeLine}};margin-bottom: 0;height: 59px;"><img src="{{three}}" style="height:17px;display: block;margin-left:auto;margin-right:auto;" alt=""/></div>
</div>
</div>
</div>
<span ng-show="loading" style="position: absolute;z-index: 99999;margin-left:-75px;top:150px;left:50%;right:50%;background:rgba(0,0,0,0.5);text-align:center;padding:15px;width:150px;" >
<div>
<ion-spinner icon="spiral"></ion-spinner>
<h5 style="color:#fff;">Processing...</h5>
</div>
</span>
<ion-nav-view></ion-nav-view>
</body>
Your question does not explain which <div> you are trying to hide and what code you have tried to use already, but can you assign a function to the on-scroll directive of the ion-content and do whatever you want to do in that function. So like this:
<ion-content on-scroll="scrollFunction()">
And then in your controller add a function called scrollFunction or preferably something more descriptive.
$scope.getScrollPosition = function() {
// Here you can do whatever you want when someone is scrolling.
}
You could for example update a variable in this function and assigned that variable to the ng-show of the <div> you want to show or hide.
To answer your other question regarding why the getScrollPosition() function keeps returning 0. It is a known issue, you can find similar reports here. I am not entirely sure why this happens, but it seems like Ionic is grabbing the scroll position of a different view causing it to stay 0. You can solve this by assigning a delegate-handler to your <ion-content>, which basically gives you an unique identifier to work with. It would look something like this:
<ion-content delegate-handle="scrollHandler" on-scroll="getScrollPosition()">
And then in your controller, instead of doing the following:
$ionicScrollDelegate.getScrollPosition().top;
You need to do this:
$ionicScrollDelegate.$getByHandle("scrollHandler").getScrollPosition().top;
That should solve the issues you are experiencing.
I have a very simple thing I am trying to do. The ng-click is not working. Any ideas why? Is there a problem with divs that are embedded in another div or am I just too sleepy? That item affected is not included in the code below, but no event is ever registered with the click.
<div ng-switch-when="3" ng-mouseenter="showIcons=true" ng-mouseleave="showIcons=false">
<div ng-if="editPerm" ng-show="showIcons" class="icon_holder" style="width: {{obj.mainwidth}}px;">
<div class="deletebutton"></div>
<div ng-click="equationShow=!equationShow" class="equationspecs"></div>
</div>
<div class="equationBlock">
<div class="eqshow" id="{{obj.itemid}}" ng-show="!obj.showEdit" ng-dblclick="obj.showEdit=!obj.showEdit">
<span mathjax-bind="obj.data.Format_left"></span>=
<span mathjax-bind="obj.data.Format_showequation"></span>=
<span mathjax-bind="obj.data.Format_showsolution"></span>
</div>
If you were able to click on a div with no content in it (sometimes a hard thing to do!), it would simply invert the value of equationShow on the scope.
But that would produce no visible difference. From what I can see in your example, the value of equationShow isn't being used in any way.
Based on your comment, you've probably got a problem with variable scoping.
If, for instance, you did something like this, it'd be more likely to work:
<div ng-init="myVariable = false">
<div ng-if="!myVariable">
<div ng-click="$parent.myVariable = !$parent.myVariable">Show the other div</div>
</div>
<div ng-if="myVariable">
Showing this div
</div>
</div>
I have an strange issue with displaying graphs in AMD Layout.
There are two widgets in which I've defined graphs and here is how it looks like - you can see that graphs in widgets go out of their area
I've tried reproduce this bug in plunker and there is nothing wrong :/
When I make a small change in browser (for example, I move the edge of the browser), graphs return to the right place -> http://recordit.co/mRmNAjH840
<div layout="row" ng-controller="GraphCtrl" layout-md="column" layout-sm="column" layout-margin="">
<section class="widget md-whiteframe-z1 ng-isolate-scope md-cyan-theme" ng-class="{'widget-overlay-title': overlayTitle}" ng-attr-layout="{{widgetLayout}}" content-padding="" flex-gt-lg="66" flex-gt-md="66">
<div class="panel-heading">Widget1<span flex=""></span>
</div>
<div class="panel-body">
<div id="chart1"></div>
</div>
</section>
<section class="widget md-whiteframe-z1 ng-isolate-scope md-cyan-theme" ng-class="{'widget-overlay-title': overlayTitle}" ng-attr-layout="{{widgetLayout}}" content-padding="" flex-gt-lg="32" flex-gt-md="32">
<div class="panel-heading">Widget2<span flex=""></span>
</div>
<div class="panel-body">
<div id="c3_combined"></div>
</div>
</section>
</div>
I'm not sure if this is related to your problem, but on IE, I have to add this CSS property manually :
svg { overflow: hidden; }