<apex:page controller="TestChartCTRL">
    <apex:repeat value="{!strings}" var="str">
        <table border="1"><tr><td>
            <apex:chart data="dataArray" width="500" height="200">
                <apex:axis type="Category" fields="gender" position="left" title="Gender" steps="1"/>
                <apex:axis type="Numeric" fields="amount" position="bottom" title="PeopleAmount" steps="1"/>
                <apex:barSeries axis="bottom" orientation="horizontal" xField="amount" yField="gender" colorSet="#0000FF,#FF0000">
                    <apex:chartLabel display="insideStart" field="amount" color="#333"/>
                </apex:barSeries>
            </apex:chart>
            </td></tr></table>
    </apex:repeat>
    <script>
    var dataArray = new Array();
    dataArray.push({'amount':1225,'gender':'Male'});
    dataArray.push({'amount':1189,'gender':'Female'});
    </script>
</apex:page>

public class TestChartCTRL {
	public String[] getStrings() {
        return new String[]{'ONE','TWO'};
    }
}

<apex:page >
    <apex:chart data="dataArray" width="500" height="200">
        <apex:axis type="Category" fields="gender" position="left" title="Gender"/>
        <apex:axis type="Numeric" fields="amount" position="bottom" title="PeopleAmount"/>
        <apex:barSeries axis="bottom" orientation="horizontal" xField="amount" yField="gender"/>
    </apex:chart>
    <script>
    	var dataArray = new Array();
        dataArray.push({'amount':1225,'gender':'Male'});
        dataArray.push({'amount':1189,'gender':'Female'});
    </script>
</apex:page>

Uncaught Error in $A.getCallback() [Cannot read property 'Name' of undefined]
Callback failed: serviceComponent://ui.approval.process.components.controllers.CommentsCardController/ACTION$getComments
throws at https://linecorporation--stage.lightning.force.com/auraFW/javascript/2xSDXSNTbpIkKqySFG1xSw/aura_prod.js:34:15. Caused by: Error in $A.getCallback() [Cannot read property 'Name' of undefined]
Callback failed: serviceComponent://ui.approval.process.components.controllers.CommentsCardController/ACTION$getComments
Object.getStepComment()@https://linecorporation--stage.lightning.force.com/components/runtime_approval_process/commentsCard.js:3:409
Object.eval()@https://linecorporation--stage.lightning.force.com/components/runtime_approval_process/commentsCard.js:3:82

<aura:component >    
    <lightning:overlayLibrary aura:id="overlayLib"/>
    <lightning:button name="popover" label="Show Popover" onclick="{!c.handleShowPopover}"/>    
    <div class="mypopover" onmouseover="{!c.handleShowPopover}">Popover should display if you hover over here.</div>
</aura:component>

// Controller
({
    handleShowPopover : function(component, event, helper) {
        component.find('overlayLib').showCustomPopover({
            body: "Popovers are positioned relative to a reference element",
            referenceSelector: ".mypopover",
            cssClass: "popoverclass"
        }).then(function (overlay) {
            setTimeout(function(){ 
                //close the popover after 3 seconds
                overlay.close(); 
            }, 3000);
        });
    }
})

// app
<aura:application >
    <c:Popover_OneStop />
</aura:application>

<apex:page standardController="Account">
    <apex:form>
        <td>            
            <div>
                <a href="/{!Account.id}"
                   id="lookup{!Account.id}opp4"
                   onblur="LookupHoverDetail.getHover('lookup{!Account.id}opp4').hide();"
                   onfocus="LookupHoverDetail.getHover('lookup{!Account.id}opp4', '/{!Account.id}/m?retURL=/{!Account.id}&isAjaxRequest=1').show();"
                   onmouseout="LookupHoverDetail.getHover('lookup{!Account.id}opp4').hide();"
                   onmouseover="LookupHoverDetail.getHover('lookup{!Account.id}opp4', '/{!Account.id}/m?retURL=/{!Account.id}&isAjaxRequest=1').show();">
                    Account: {!Account.Name}
                </a>
            </div>
        </td>
    </apex:form>
</apex:page>

<apex:page sidebar="false">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){

        $(".b1").click(function(){
            $("#t1").show();
            $("#t2").hide();
        });
        
        $(".b2").click(function(){
            $("#t1").hide();
            $("#t2").show();
        });
        
    });
</script>
    <apex:form>

        <button class="b1">
            Table1
        </button>
        <button class="b2">
            Table2
        </button>
        <div id="t1">
			Table1
        </div>
        <div id="t2">
			Table2
        </div>

    </apex:form>
</apex:page>

<apex:page docType="html-5.0" controller="Sample">
<apex:form >
    <apex:pageBlock >
        <apex:pageBlockSection>
            <apex:pageBlockSectionItem>
                Date: <apex:input type="date" value="{!dat}"/>
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:form>
</apex:page>

public class Sample {
    public Date dat {get;set;}
    public Sample() {

    }
}

<apex:page showHeader="false" standardController="Account" docType="html-5.0">
    <apex:form >
    	<apex:pageBlock title="Test InputField">
            <apex:inputField value="{! Account.Name }"/><br/>
            <apex:inputField type="number" value="{! Account.NumberOfEmployees }"/>
        </apex:pageBlock>
    </apex:form>
</apex:page>

<apex:page controller="TestChartCTRL">
    <apex:repeat value="{!strings}" var="str">
        <table border="1"><tr><td>
            <apex:chart data="dataArray" width="500" height="200">
                <apex:axis type="Category" fields="gender" position="left" title="Gender" steps="1"/>
                <apex:axis type="Numeric" fields="amount" position="bottom" title="PeopleAmount" steps="1"/>
                <apex:barSeries axis="bottom" orientation="horizontal" xField="amount" yField="gender" colorSet="#0000FF,#FF0000">
                    <apex:chartLabel display="insideStart" field="amount" color="#333"/>
                </apex:barSeries>
            </apex:chart>
            </td></tr></table>
    </apex:repeat>
    <script>
    var dataArray = new Array();
    dataArray.push({'amount':1225,'gender':'Male'});
    dataArray.push({'amount':1189,'gender':'Female'});
    </script>
</apex:page>

public class TestChartCTRL {
	public String[] getStrings() {
        return new String[]{'ONE','TWO'};
    }
}

<apex:page >
    <apex:chart data="dataArray" width="500" height="200">
        <apex:axis type="Category" fields="gender" position="left" title="Gender"/>
        <apex:axis type="Numeric" fields="amount" position="bottom" title="PeopleAmount"/>
        <apex:barSeries axis="bottom" orientation="horizontal" xField="amount" yField="gender"/>
    </apex:chart>
    <script>
    	var dataArray = new Array();
        dataArray.push({'amount':1225,'gender':'Male'});
        dataArray.push({'amount':1189,'gender':'Female'});
    </script>
</apex:page>

Uncaught Error in $A.getCallback() [Cannot read property 'Name' of undefined]
Callback failed: serviceComponent://ui.approval.process.components.controllers.CommentsCardController/ACTION$getComments
throws at https://linecorporation--stage.lightning.force.com/auraFW/javascript/2xSDXSNTbpIkKqySFG1xSw/aura_prod.js:34:15. Caused by: Error in $A.getCallback() [Cannot read property 'Name' of undefined]
Callback failed: serviceComponent://ui.approval.process.components.controllers.CommentsCardController/ACTION$getComments
Object.getStepComment()@https://linecorporation--stage.lightning.force.com/components/runtime_approval_process/commentsCard.js:3:409
Object.eval()@https://linecorporation--stage.lightning.force.com/components/runtime_approval_process/commentsCard.js:3:82

<aura:component >    
    <lightning:overlayLibrary aura:id="overlayLib"/>
    <lightning:button name="popover" label="Show Popover" onclick="{!c.handleShowPopover}"/>    
    <div class="mypopover" onmouseover="{!c.handleShowPopover}">Popover should display if you hover over here.</div>
</aura:component>

// Controller
({
    handleShowPopover : function(component, event, helper) {
        component.find('overlayLib').showCustomPopover({
            body: "Popovers are positioned relative to a reference element",
            referenceSelector: ".mypopover",
            cssClass: "popoverclass"
        }).then(function (overlay) {
            setTimeout(function(){ 
                //close the popover after 3 seconds
                overlay.close(); 
            }, 3000);
        });
    }
})

// app
<aura:application >
    <c:Popover_OneStop />
</aura:application>

<apex:page standardController="Account">
    <apex:form>
        <td>            
            <div>
                <a href="/{!Account.id}"
                   id="lookup{!Account.id}opp4"
                   onblur="LookupHoverDetail.getHover('lookup{!Account.id}opp4').hide();"
                   onfocus="LookupHoverDetail.getHover('lookup{!Account.id}opp4', '/{!Account.id}/m?retURL=/{!Account.id}&isAjaxRequest=1').show();"
                   onmouseout="LookupHoverDetail.getHover('lookup{!Account.id}opp4').hide();"
                   onmouseover="LookupHoverDetail.getHover('lookup{!Account.id}opp4', '/{!Account.id}/m?retURL=/{!Account.id}&isAjaxRequest=1').show();">
                    Account: {!Account.Name}
                </a>
            </div>
        </td>
    </apex:form>
</apex:page>

<apex:page sidebar="false">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){

        $(".b1").click(function(){
            $("#t1").show();
            $("#t2").hide();
        });
        
        $(".b2").click(function(){
            $("#t1").hide();
            $("#t2").show();
        });
        
    });
</script>
    <apex:form>

        <button class="b1">
            Table1
        </button>
        <button class="b2">
            Table2
        </button>
        <div id="t1">
			Table1
        </div>
        <div id="t2">
			Table2
        </div>

    </apex:form>
</apex:page>

<apex:page docType="html-5.0" controller="Sample">
<apex:form >
    <apex:pageBlock >
        <apex:pageBlockSection>
            <apex:pageBlockSectionItem>
                Date: <apex:input type="date" value="{!dat}"/>
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:form>
</apex:page>

public class Sample {
    public Date dat {get;set;}
    public Sample() {

    }
}

<apex:page showHeader="false" standardController="Account" docType="html-5.0">
    <apex:form >
    	<apex:pageBlock title="Test InputField">
            <apex:inputField value="{! Account.Name }"/><br/>
            <apex:inputField type="number" value="{! Account.NumberOfEmployees }"/>
        </apex:pageBlock>
    </apex:form>
</apex:page>

<!-- Calendar.cmp  -->
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" controller="CalendarEvent_CLASS">
    <aura:attribute name="daysOfWeek" type="String[]"/>
    <aura:attribute name="week1" type="String"/>
    <aura:attribute name="month" type="String"/>
    <aura:attribute name="currentMonth" type="Date"/>
    <aura:attribute name="pickList" type="String[]"/>
    <aura:attribute name="selectedDept" type="String" default="Any"/>
    <aura:attribute name="selectedUser" type="String" default="Any"/>
    <aura:attribute name="eventList" type="Event[]"/>
 
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
 
    <div class="slds-grid slds-page-header"   role="banner">  <!-- banner  -->
        
        
        <div class=" slds-size--1-of-12 slds-align--absolute-center"   > <lightning:buttonIcon name="back" alternativeText="Back" iconName="utility:chevronleft" onclick="{!c.lastMonth}"/> </div>
   	    <div class=" slds-size--9-of-12 slds-align--absolute-center"> <b>{!v.month} </b></div>
        <div class=" slds-size--1-of-12 slds-align--absolute-center"  >  <lightning:buttonIcon name="back" alternativeText="Back" iconName="utility:chevronright" onclick="{!c.nextMonth}"/> </div>
        <div class=" slds-size--1-of-12 slds-align--absolute-center"  > 
            
    <lightning:select name="pick" label="Department" onchange="{!c.updateDepartment}" aura:id="pickId">
        <aura:iteration items="{!v.pickList}" var="item">
        <option value="{!item}">{!item}</option>
        
        </aura:iteration>
    
    </lightning:select>
        
        </div>
            
    </div>

	<table class="slds-table slds-table--bordered slds-is-resizable" role="grid">
  		<thead>
   			 <tr class="slds-text-title--caps">
                 <aura:iteration items="{!v.daysOfWeek}" var="day">
                     <th class="slds-cell-shrink" scope="col" style="text-align: center;"><b>{!day}</b> </th>
                 </aura:iteration>
            </tr>
        </thead>
        <tbody>
   {!v.body}
        
        </tbody>
    </table>


    

	
</aura:component>

({
    // Calendar - controller
    
	doInit : function(component, event, helper) {
        var today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth(); //January is 0!
        var yyyy = today.getFullYear();
      // get first day of month
        var today = new Date(yyyy, mm, 1); 
        component.set("v.currentMonth", today);
        var selected = component.get("v.selectedDept");
       helper.retrievePickList(component);
        helper.retrieveEventList(component, mm +1, yyyy, selected);
	},  // end function
    
    
    lastMonth : function(component, event, helper) {
        var currentMonth = component.get('v.currentMonth');
        currentMonth = new Date(currentMonth);
        
        currentMonth = currentMonth.setMonth(currentMonth.getMonth() -1);
        currentMonth = new Date(currentMonth);
        component.set('v.currentMonth', currentMonth);
        var month = currentMonth.getMonth() +1;
        var year = currentMonth.getFullYear() ;
        var selected = component.get("v.selectedDept");
        helper.retrieveEventList(component, month, year);
	},
    
 
    nextMonth : function(component, event, helper) {
        var currentMonth = component.get('v.currentMonth');
        currentMonth = new Date(currentMonth);
        
        currentMonth = currentMonth.setMonth(currentMonth.getMonth() +1);
        currentMonth = new Date(currentMonth);
        component.set('v.currentMonth', currentMonth);
        var month = currentMonth.getMonth() +1;
        var year = currentMonth.getFullYear() ;  
        var selected = component.get("v.selectedDept");
        helper.retrieveEventList(component, month, year);
        
	},


    updateDepartment : function(component, event, helper) {  
        var selected = component.find("pickId").get("v.value");
        component.set('v.selectedDept', selected);
        console.log('result' + selected);
    	var currentMonth = component.get('v.currentMonth');
        currentMonth = new Date(currentMonth);
        var month = currentMonth.getMonth() +1;
        var year = currentMonth.getFullYear() ;
        helper.createCalendar(component);        
    },
    
    
    
})

({
    // calendar - helper
    
    retrievePickList : function(component) {
		var action = component.get("c.getDepartments");
       
       // action.setParams({"month": month, "year": year});
        action.setCallback(this, function(response){
            var state = response.getState();
            if (component.isValid() && state === "SUCCESS") {
                var returned =response.getReturnValue();
                console.log("SUCCESS returned: " + JSON.stringify(returned));
                component.set('v.pickList', returned);
            }
        });
        $A.enqueueAction(action);          
    },
    
    
    retrieveEventList : function(component, month, year) {
		var action = component.get("c.getEventList");
        action.setParams({"month": month, "year": year});
        action.setCallback(this, function(response){
            var state = response.getState();
            if (component.isValid() && state === "SUCCESS") {
                var returned =response.getReturnValue();
                component.set('v.eventList', returned);
                // console.log("SUCCESS returned: " + JSON.stringify(returned));
                var that = this;
                that.createCalendar(component);

            }
        });
        $A.enqueueAction(action);          
    },
    
    
    
	createCalendar : function(component) {
        var eventList = component.get('v.eventList');
        var today = component.get('v.currentMonth');
        var selectedDept = component.get('v.selectedDept');
		
        //these are labels for the days of the week
        var cal_days_labels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];    
        component.set('v.daysOfWeek', cal_days_labels)
        // these are human-readable month name labels, in order
        var cal_months_labels = ['January', 'February', 'March', 'April',
                         'May', 'June', 'July', 'August', 'September',
                         'October', 'November', 'December'];        
		            
        //today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth(); //January is 0!
        var yyyy = today.getFullYear();
        // get first day of month
        var firstDay = new Date(yyyy, mm, 1);
        console.log(' firstday = ' + firstDay);
				
		        
        var startingDay = firstDay.getDay();
        var nextDay = new Date(firstDay);
        component.set('v.month', cal_months_labels[mm] + ' ' + yyyy);       
        console.log(' starting day ' + startingDay);
	    
        // find number of days in month
        var monthLength = new Date(yyyy, mm, 0).getDate() +1;
        console.log (' monthLength ' + monthLength);  
				       
        // compensate for leap year
        if (mm == 2) { // February only!
        	if((yyyy % 4 == 0 && yyyy % 100 != 0) || yyyy % 400 == 0){
          		monthLength = 29;
        }
      }
        
        

 // **********************************************************************88   
    // Array of components to create
    	var newComponents = [];
        
        // put the weeks/table rows in the components array
        for (var i = 0; i < 7; i++) 
        {
			newComponents.push(["aura:html", {
            	"tag": "tr"
      		}]);              
        }
        
        for (var i = 1; i <= startingDay; i++) {
            // put the days rows in the components array
       		 newComponents.push(["c:CalendarDay", {
				"visible": false
        	 }]); 
        }           
  
 // **********************************************************************88 
 // in this section, we loop through the days of the month and create components for each day       
        for (var i = 1; i <= monthLength; i++) {  //
            var stringBody = [];
            var nextDay = nextDay.toISOString().slice(0,10);
            // console.log('nextDay ' +nextDay);
            for(var e = 0;  e < eventList.length; e ++) {
                var eventDate = new Date(eventList[e].StartDateTime);
                var eventDept = eventList[e].Department__c;
                eventDate = eventDate.toISOString().slice(0,10);
                // if the calendar day of the month matches the calendar day of the event, then add the subject of the event to the calendar day compeonet
            	if (eventDate == nextDay) {
                    if (selectedDept == 'Any') {
                    	stringBody.push(eventList[e].Subject);    
                    }
                    else if (eventDept == selectedDept) {
                        stringBody.push(eventList[e].Subject); 
                    }
            	}                
            } // end for 

            // increament day for the date variable
            var nextDay = new Date(nextDay);
            var dateValue = nextDay.getDate() + 1;
            nextDay.setDate(dateValue);
     		
            newComponents.push(["c:CalendarDay", {
				"day": i,
                 "toDoItems": stringBody
        	 }]); 
        }  
        
        for (var i = 1; i <= 5; i++) {
            // put the days rows in the components array
       		 newComponents.push(["c:CalendarDay", {
                 "visible": false
        	 }]); 
        }             
            
 // **********************************************************************88           
 
   $A.createComponents(newComponents,
        function (components, status, errorMessage) {
           if (status === "SUCCESS") {
               var pageBody = component.get("v.body");
               pageBody = [];
               for (var outer = 0; outer < 5; outer ++) {	
                    var tr = components[outer];
                    var trBody = tr.get("v.body");
                    for (var inner = 1; inner < 8; inner ++) {
                        var outerAdj = outer +0;
                    	var adj =  6 + + inner + (7 * outerAdj); 
                        var toDay = components[adj];
                        trBody.push(toDay);
                    }
                    tr.set("v.body", trBody)
                    pageBody.push(tr);
               }

				component.set("v.body", pageBody);
            }  // end success
            else // Report any error
            {
                this.displayToast("Error", "Failed to create list components.");
            }
        } // end callback function
    );     // end create component   
        		
	}
})

<!-- CalendarDay.cmp  -->
<aura:component >
    <aura:attribute name="day" type="String"/>
    <aura:attribute name="visible" type="Boolean" default="true"/>
    <aura:attribute name="toDoItems" type="String[]"/>
    
    <td class = "outline" scope="col" >
       <aura:if isTrue="{!v.visible}">  
        <fieldset class="slds-box slds-theme--default ">
           
            
            
    <table class="subtable" style="vertical-align:top">
  		<thead>
   			 <tr >

                    <th   class="thClass"> {!v.day} </th>

            </tr>
        </thead>
        <tbody>
        	<aura:iteration items="{!v.toDoItems}" var="item">
           		<tr><td >{!item} </td></tr>
               </aura:iteration>
            

        
        </tbody>
    </table>
 

            
        </fieldset>
           </aura:if>
        </td>
	
</aura:component>

/* calendarDay.css  */

.THIS.outline {
    border: solid black 1px;
    float: top;
}

.THIS .thClass {
    vertical-align:top;
    text-align: center;

}

.THIS .subtable {
        vertical-align:top;
    position: relative;
     






}