Visualforce Page :
--------------------
<apex:page controller="shiftRosterController" tabStyle="Account" sidebar="false" action="{!onloadfunction}" showHeader="false">
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
* {box-sizing:border-box;}
ul {list-style-type: none;}
body {font-family: Verdana,sans-serif;}
.month {
padding: 50px 15px;
width: 100%;
background: #1abc9c;
}
.month ul {
margin: 0;
padding: 0;
margin-top: -10px;
}
.month ul li {
color: white;
font-size: 17px;
text-transform: inherit;
letter-spacing: 1px;
}
.month .prev {
float: left;
padding-top: 10px;
}
.month .next {
float: right;
padding-top: 10px;
}
.weekdays {
margin: 0;
padding: 10px 0;
background-color: #ddd;
}
.weekdays li {
display: inline-block;
width: 10.6%;
color: #666;
text-align: center;
}
.days {
padding: 10px 0;
background: #eee;
margin: 0;
}
.days li {
list-style-type: none;
display: inline-block;
width: 13.6%;
text-align: center;
margin-bottom: 5px;
font-size:12px;
color: #777;
}
.days li .active {
padding: 2px;
background: #1abc9c;
color: white !important
}
/* Add media queries for smaller screens */
@media screen and (max-width:720px) {
.weekdays li, .days li {width: 13.1%;}
}
@media screen and (max-width: 420px) {
.weekdays li, .days li {width: 12.5%;}
.days li .active {padding: 2px;}
}
@media screen and (max-width: 290px) {
.weekdays li, .days li {width: 12.2%;}
}
</style>
<apex:form >
<div class="month">
<ul>
<li style="text-align:center">
<!--<img src="{!$Resource.AccentureWhiteLogo}" style="margin-left: 200px;margin-top: -20px;"/>-->
<b>Week Selection</b>
<apex:selectList value="{!weekselection}" size="1" id="weekselect" style="color: black;padding: 1px;color: black;padding: 1px;box-shadow: inset 0 0 5px rgba(000,000,000, 0.5);">
<apex:actionSupport event="onchange" action="{!onloadfunction}" reRender="AllTables" status="status"/>
<apex:selectOptions value="{!weekvalues}"/>
</apex:selectList>
</li>
</ul>
<ul style="margin-left: 1200px;list-style-type:disc;font-family: initial;font-size: 17px;">
<li>Shift A :(07AM to 4:30PM)</li>
<li>Shift G :(9AM to 6:30PM )</li>
<li>Shift B :(12PM to 9:30PM)</li>
<li>Shift C :(9PM to 6:30AM)</li>
</ul>
</div>
<apex:outputpanel >
<apex:actionstatus id="status">
<apex:facet name="start">
<div class="waitingSearchDiv" id="el_loading" style="background-color: #fbfbfb;height: 100%;opacity:0.65;width:100%;">
<div class="waitingHolder" style="top: 115px; width: 50px;">
<img class="waitingImage" src="/img/loading.gif" title="Please Wait..." />
<span class="waitingDescription">Loading...</span>
</div>
</div>
</apex:facet>
</apex:actionstatus>
</apex:outputpanel>
<br/>
<apex:outputPanel id="AllTables">
<apex:tabPanel switchType="client" selectedTab="inceffort" id="theTabPanel" >
<apex:tab label="Resource Shift Roster" name="othereffort" id="tabTwo" style="font-weight:bold;width:200px;">
<apex:outputPanel id="otherentrytable">
<apex:pagemessages />
<apex:outputPanel rendered="{!sectionPageBlockShow}">
<apex:dataTable cellspacing="10" value="{!otherentrylist}" var="acc" rendered="{!NOT(ISNULL(otherentrylist))}" width="100%" border="0">
<apex:column headervalue="Resource Name">
<apex:inputField value="{!acc.Account__c}"/>
</apex:column>
<apex:column headervalue="Application">
<apex:inputField value="{!acc.Application__c}" required="true"/>
</apex:column>
<apex:column >
<apex:facet name="header"><apex:outputText value="{0,date,d-MMMM (EEEE)}"><apex:param value="{!SelectedRowDate+0}" /></apex:outputText></apex:facet>
<apex:inputField value="{!acc.Monday_Shift__c}" required="true"/>
</apex:column>
<apex:column >
<apex:facet name="header"><apex:outputText value="{0,date,d-MMMM (EEEE)}"><apex:param value="{!SelectedRowDate+1}" /></apex:outputText></apex:facet>
<apex:inputField value="{!acc.Tuesday_Shift__c}" required="true"/>
</apex:column>
<apex:column >
<apex:facet name="header"><apex:outputText value="{0,date,d-MMMM (EEEE)}"><apex:param value="{!SelectedRowDate+2}" /></apex:outputText></apex:facet>
<apex:inputField value="{!acc.Wed_Shift__c}" required="true"/>
</apex:column>
<apex:column >
<apex:facet name="header"><apex:outputText value="{0,date,d-MMMM (EEEE)}"><apex:param value="{!SelectedRowDate+3}" /></apex:outputText></apex:facet>
<apex:inputField value="{!acc.Thurs_Shift__c}" required="true"/>
</apex:column>
<apex:column >
<apex:facet name="header"><apex:outputText value="{0,date,d-MMMM (EEEE)}"><apex:param value="{!SelectedRowDate+4}" /></apex:outputText></apex:facet>
<apex:inputField value="{!acc.Friday_Shift__c}" required="true"/>
</apex:column>
<apex:column >
<apex:facet name="header"><apex:outputText value="{0,date,d-MMMM (EEEE)}"><apex:param value="{!SelectedRowDate+5}" /></apex:outputText></apex:facet>
<apex:inputField value="{!acc.Saturday_Shift__c}"/>
</apex:column>
<apex:column >
<apex:facet name="header"><apex:outputText value="{0,date,d-MMMM (EEEE)}"><apex:param value="{!SelectedRowDate+6}" /></apex:outputText></apex:facet>
<apex:inputField value="{!acc.Sunday_Shift__c}" />
</apex:column>
</apex:dataTable>
</apex:outputpanel>
</apex:outputpanel>
<br/> <br/>
<apex:commandButton value="Save Roster" action="{!savetimesheet}" rendered="{!cmdSaveRosterShow}" style="margin-top: 22px;padding: 8px;margin-left: 10px;"/>
<apex:commandButton value="Add another row" action="{!addrowothers}" reRender="AllTables" status="status" rendered="{!cmdAddRowRosterShow}" style="margin-top: 22px;padding: 8px;margin-left: 10px;"/>
</apex:tab>
<apex:tab label="Manager Console" name="othereffort1" id="tabTwo1" style="font-weight:bold;width:200px;">
<apex:pageMessage detail="Info: Working In progress" severity="Info"/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</apex:tab>
</apex:tabPanel>
</apex:outputPanel>
<br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</apex:form>
</apex:page>
Apex Controller :
---------------------
public class shiftRosterController{
public String weekselection{get; set;}
public String incselection{get; set;}
Public List<Employee_Shift_Roster__c> tentries;
Public List<Employee_Shift_Roster__c> otherentries;
Public Date SelectedWeek;
Public Date SelectedRowDate{get;set;}
public boolean cmdAddRowRosterShow {get;set;}
public boolean cmdSaveRosterShow{get;set;}
public Id oppId {get; set;}
public boolean sectionPageBlockShow{get;set;}
public void shiftRosterController(){
cmdAddRowRosterShow = false;
cmdSaveRosterShow = false;
sectionPageBlockShow = false;
}
public void onloadfunction(){
try{
if(weekselection=='--None--'|| weekselection == null){
ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.Confirm,'Please select week value from above picklist'));
cmdAddRowRosterShow = false;
cmdSaveRosterShow = false;
sectionPageBlockShow = false;
}else{
if ( weekselection != null){
SelectedWeek = date.valueOf(weekselection);
system.debug('The Selected Week is'+SelectedWeek);
tentries = [select id,Account__c,Work_Week__c ,Application__c,Friday_Shift__c,Monday_Shift__c,Saturday_Shift__c,Sunday_Shift__c,Thurs_Shift__c,Tuesday_Shift__c,Wed_Shift__c from Employee_Shift_Roster__c where Work_Week__c=:SelectedWeek];
otherentries = [select id,Account__c,Application__c,Work_Week__c ,Friday_Shift__c,Monday_Shift__c,Saturday_Shift__c,Sunday_Shift__c,Thurs_Shift__c,Tuesday_Shift__c,Wed_Shift__c from Employee_Shift_Roster__c where Work_Week__c=:SelectedWeek];
SelectedRowDate = Date.valueOf(weekselection);
cmdAddRowRosterShow = true;
cmdSaveRosterShow = true;
sectionPageBlockShow = true;
}else{
Date currentdate = date.today();
SelectedWeek = currentdate.toStartofWeek()+1;
system.debug('The Selected Week is'+SelectedWeek);
tentries = [select id,Account__c,Application__c,Work_Week__c ,Friday_Shift__c,Monday_Shift__c,Saturday_Shift__c,Sunday_Shift__c,Thurs_Shift__c,Tuesday_Shift__c,Wed_Shift__c from Employee_Shift_Roster__c where Work_Week__c=:SelectedWeek];
otherentries = [select id,Account__c,Application__c,Work_Week__c ,Friday_Shift__c,Monday_Shift__c,Saturday_Shift__c,Sunday_Shift__c,Thurs_Shift__c,Tuesday_Shift__c,Wed_Shift__c from Employee_Shift_Roster__c where Work_Week__c=:SelectedWeek];
SelectedRowDate = Date.valueOf(weekselection);
cmdAddRowRosterShow = true;
cmdSaveRosterShow = true;
sectionPageBlockShow = true;
}
}
}catch(exception e){
}
}
public List<Employee_Shift_Roster__c> getentrylist(){
if (tentries!=NULL && tentries.size()>0)
return tentries;
else
return null;
}
public List<Employee_Shift_Roster__c> getotherentrylist(){
if (otherentries!=NULL && otherentries.size()>0)
return otherentries;
else
return null;
}
public List<SelectOption> getweekvalues(){
List<SelectOption> options = new List<SelectOption>();
Date currentdate = date.today();
Date currentweekstart = currentdate.toStartofWeek()+1;
Date currentweekend = currentweekstart +6;
Date oldestweekstart = currentweekstart - 7;
Date oldestweekend;
options.add(new SelectOption('--None--','--None--'));
options.add(new SelectOption(currentweekstart+'',currentweekstart.format()+' to '+currentweekend.format()));
for (Integer i =0; i<=10 ; i++){
oldestweekend = oldestweekstart+6;
options.add(new SelectOption(oldestweekstart+'',oldestweekstart.format()+' to '+oldestweekend.format()));
oldestweekstart +=7;
}
return options;
}
public void addrowothers(){
system.debug('The Selected Week is'+SelectedWeek);
Employee_Shift_Roster__c newentry = new Employee_Shift_Roster__c(Work_Week__c=SelectedWeek);
otherentries.add(newentry);
}
Public Pagereference canceltimesheet(){
Pagereference p = Page.timesheetmanagement;
return p;
}
public Pagereference savetimesheet(){
try{
upsert tentries;
upsert otherentries;
Pagereference p = Page.ShiftRosterController_Pge;
return p;
}catch(exception e){
return null;
}
}
}
Screen Shot :
--------------
